/* Home, computers: Our philosophy (5 Nov 2026), after the "citazione" concept (home-citazione.html, itself after Studio Peregalli):
   a dark room, one band of lit wall, the words hung flush right. Here the band is Surihaku (Art Wall Legend II, gold leaf by a paper
   lamp) down the left edge; the user's English in the headline face's italic; the Japanese set vertically at the right edge, as
   tategaki, so the whole fits one window. Placed between Art Wall Legend II and Washi: a dark pause between two light sections, its
   fibre, moisture and sheets leading into Washi. Arrival (tomita-arrive-*.js adds .tm-in, once): the band comes up from the dark,
   the Japanese columns appear right to left, then the English. Phones keep their own home page, so this is hidden there. */
.tm-ph{display:none}
@media (min-width:768px){
  .tm-ph{--ph-h:clamp(600px,calc(100svh - 91px),980px);--ph-band:min(34vw,calc(var(--ph-h)*.76));
    display:grid;grid-template-columns:var(--ph-band) minmax(0,1fr) auto;align-items:center;column-gap:clamp(40px,4.5vw,96px);
    height:var(--ph-h);padding-right:calc(var(--tm-edge,24px) + 1.3cm);color:#f3ede2;overflow:hidden;
    background:radial-gradient(55% 90% at 0% 55%,rgba(150,98,38,.16),rgba(150,98,38,0) 70%),#0b0907}
  .tm-ph-band{margin:0;height:100%;overflow:hidden;background:#1a130c}
  .tm-ph-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%;max-height:none!important}

  .tm-ph-words{justify-self:end;max-width:33rem;text-align:right}
  #tm-ph-title{margin:0 0 clamp(22px,2.4vw,34px);font-size:clamp(24px,2vw,30px)!important;line-height:1.15!important;color:#f3ede2}
  .tm-ph-en p{margin:0;font:italic 500 clamp(18px,1.42vw,23px)/1.7 "Cormorant Garamond",Georgia,serif;letter-spacing:.005em;color:rgba(243,237,226,.9);text-wrap:balance}
  .tm-ph-en p+p{margin-top:.85em}

  .tm-ph-jp{margin:0;writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;height:min(37em,calc(var(--ph-h) - 110px));
    font:300 clamp(13px,1.7vh,15.5px)/2.35 "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.15em;
    color:rgba(243,237,226,.74);line-break:strict;word-break:keep-all}
  .tm-ph-jp span{display:block}
}
/* the name, as on the citazione page (user, 5 Nov 2026): the wordmark in white and "Tokyo · 1923" beneath, hung at the top right over
   the Japanese. The photograph now lies under the section's left edge, so the words can sit lower and clear the name. */
@media (min-width:768px){
  .tm-ph{position:relative;--ph-top:clamp(112px,15vh,150px);grid-template-columns:minmax(0,1fr) auto;
    padding:var(--ph-top) calc(var(--tm-edge,24px) + 1.3cm) clamp(36px,5vh,60px) calc(var(--ph-band) + clamp(40px,4.5vw,96px))}
  .tm-ph-band{position:absolute;left:0;top:0;bottom:0;width:var(--ph-band)}
  .tm-ph-jp{height:min(37em,calc(var(--ph-h) - var(--ph-top) - 70px));font-size:clamp(12px,1.62vh,15.5px)}
  .tm-ph .tm-ph-name{position:absolute;top:clamp(30px,4.6vh,52px);right:calc(var(--tm-edge,24px) + 1.3cm);margin:0;text-align:right;line-height:1}
  .tm-ph-name img{display:block;height:clamp(24px,2.3vw,34px);width:auto;margin-left:auto;filter:brightness(0) invert(1);max-height:none!important}
  .tm-ph-name span{display:block;margin-top:clamp(10px,1.3vh,14px);font:400 clamp(11px,.85vw,14px)/1 "Playfair Display",Georgia,serif;
    letter-spacing:.22em;text-transform:uppercase;color:#f3ede2;font-variant-numeric:lining-nums}
}
/* the arrival */
@keyframes tm-ph-lights{from{filter:brightness(.12);scale:1.06}}
@keyframes tm-ph-col{from{opacity:0;translate:0 -14px}}
@keyframes tm-ph-up{from{opacity:0;translate:0 16px}}
@media (min-width:768px){
  html.tm-arrive #tm-philosophy:not(.tm-in) .tm-ph-band img{filter:brightness(.12)}
  html.tm-arrive #tm-philosophy:not(.tm-in) .tm-ph-jp span,
  html.tm-arrive #tm-philosophy:not(.tm-in) .tm-ph-words>*,
  html.tm-arrive #tm-philosophy:not(.tm-in) .tm-ph-en p,
  html.tm-arrive #tm-philosophy:not(.tm-in) .tm-ph-name{opacity:0}
  html.tm-arrive #tm-philosophy.tm-in .tm-ph-band img{animation:tm-ph-lights 2.8s cubic-bezier(.3,0,.2,1) backwards}
  html.tm-arrive #tm-philosophy.tm-in .tm-ph-jp span{animation:tm-ph-col 1.3s cubic-bezier(.25,0,.2,1) calc(.7s + var(--i,0)*.2s) backwards}
  html.tm-arrive #tm-philosophy.tm-in .tm-ph-name{animation:tm-ph-up 1.2s cubic-bezier(.25,0,.2,1) .4s backwards}
  html.tm-arrive #tm-philosophy.tm-in .tm-ph-label{animation:tm-ph-up 1s cubic-bezier(.25,0,.2,1) 1.7s backwards}
  html.tm-arrive #tm-philosophy.tm-in .tm-ph-en p{animation:tm-ph-up 1.2s cubic-bezier(.25,0,.2,1) calc(1.9s + var(--i,0)*.22s) backwards}
}
@media (prefers-reduced-motion:reduce){#tm-philosophy *{animation:none!important}}
/* in the introduction's slider, as its third slide after Materials & Craft (user, 5 Nov 2026): the slider's height, not the window's;
   the title in the headline face (tomita-type: "Our Philosophy", as "Art Wall Legend II"), without the orange hairline */
@media (min-width:768px){
  #tm-intro #tm-philosophy{--ph-h:var(--ih);--ph-top:clamp(100px,14vh,140px);z-index:0;height:100%;text-align:left;
    padding:var(--ph-top) calc(var(--tm-edge,24px) + 1.3cm) clamp(32px,4.5vh,56px) calc(var(--ph-band) + clamp(40px,4.5vw,96px))}
}
/* the name block taken off again (user, 5 Nov 2026), and the English set level with the Japanese: both start at the same height, the
   pair centred in the slide */
@media (min-width:768px){
  .tm-ph-name{display:none!important}
  #tm-intro #tm-philosophy{--ph-pad:clamp(48px,8vh,96px);padding-top:var(--ph-pad);padding-bottom:var(--ph-pad);align-items:start;align-content:center}
  #tm-intro #tm-philosophy .tm-ph-jp{height:min(37em,calc(var(--ph-h) - 2*var(--ph-pad)))}
  #tm-intro #tm-philosophy .tm-ph-words{align-self:start}
}