/* Home, the introduction under the hero (4 Nov 2026, computers only), after the v3 home page: a small label, the line in
   Playfair, a paragraph and "Our heritage", centred on burgundy (on paper until a later request the same day). Phones open with their own line (#tm-phone-home), so it is hidden
   there. Title face: tomita-type-*.css. */
#tm-intro{display:none}
@media (min-width:768px){
  /* the AWL-2152 mokumeshima close-up behind it (user, 4 Nov 2026; burgundy before, kept as the colour under the photograph), a
     black veil over it deepening from 0 to 50% as the section comes up the screen, so the words stand out (tomita-intro-*.js sets
     --tm-dim) */
  #tm-intro{display:block;position:relative;isolation:isolate;color:#f1e7da;text-align:center;padding:clamp(88px,9vw,150px) var(--tm-edge,24px);
    background:#4a1c22 url("/home/opt/awl-2152-mokumeshima-967.webp") 50% 45%/cover no-repeat}
  #tm-intro::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;opacity:var(--tm-dim,.5);pointer-events:none}
  #tm-intro .tm-intro-words>*{position:relative;text-shadow:0 1px 18px rgba(0,0,0,.35)}
  #tm-intro .tm-intro-label{margin:0;font:500 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#cdb3a4}
  #tm-intro #tm-intro-title{max-width:none;margin:22px auto 26px;font-size:clamp(28px,2.8vw,42px)!important;line-height:1.2!important;color:#f6ede1}
  #tm-intro .tm-intro-lede{max-width:42rem;margin:0 auto 30px;font:400 clamp(16px,1.15vw,18px)/1.75 "PT Serif",Georgia,serif;color:#e6d8c8}
  #tm-intro .tm-intro-link{display:inline-block;font:italic 400 15px/1.4 "PT Serif",Georgia,serif;letter-spacing:.01em;color:#f6ede1;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .4s}
  #tm-intro .tm-intro-link:hover{text-decoration-color:#fc8702}
  #tm-intro .tm-intro-link:focus-visible{outline:1px solid #f6ede1;outline-offset:4px}
}
/* the four lines appear in reading order as the section arrives (tomita-intro-*.js adds html.tm-intro-motion, then .is-in) */
@media (min-width:768px){
  html.tm-intro-motion #tm-intro .tm-intro-words>*{opacity:0;translate:0 12px;
    transition:opacity 1.1s cubic-bezier(.33,0,.2,1) calc(var(--tm-i,0)*140ms),translate 1.3s cubic-bezier(.33,0,.2,1) calc(var(--tm-i,0)*140ms)}
  html.tm-intro-motion #tm-intro.is-in .tm-intro-words>*{opacity:1;translate:0 0}
}
/* a light paper behind it (user, 4 Nov 2026, trying the Hana V papers): the paper stays light, the words turn dark, and the scroll
   deepens the paper only a little (to 12%); set by a class on the section: tm-intro-light, the paper in --tm-paper */
@media (min-width:768px){
  #tm-intro.tm-intro-light{color:#2a1f18;background:#f3efe7 var(--tm-paper) 50% 50%/cover no-repeat}
  #tm-intro.tm-intro-light::before{background:#2a1f18;opacity:calc(var(--tm-dim,.5)*.24)}
  #tm-intro.tm-intro-light .tm-intro-words>*{text-shadow:0 0 22px rgba(255,255,255,.55)}
  #tm-intro.tm-intro-light .tm-intro-label{color:#6b5d50}
  #tm-intro.tm-intro-light #tm-intro-title{color:#2a1f18}
  #tm-intro.tm-intro-light .tm-intro-lede{color:#3d3027}
  #tm-intro.tm-intro-light .tm-intro-link{color:#2a1f18}
  #tm-intro.tm-intro-light .tm-intro-link:focus-visible{outline-color:#2a1f18}
}

/* a white frame drawn inside the picture: 0.3cm thick, 0.5cm in from every edge (user, 4 Nov 2026); over the paper and its veil,
   under the words */
@media (min-width:768px){
  #tm-intro::after{content:"";position:absolute;inset:.5cm;z-index:-1;border:.3cm solid #fff;pointer-events:none}
}
/* the light paper, softer and arriving (user, 4 Nov 2026): the paper sits on its own layer (::before) under a 42% wash of the page's
   paper so the words read easily; with motion, the section starts as plain page paper and, as it arrives, the paper fades up out of
   nothing (1.6s), then the frame (from 0.5s), then the four lines (from 0.9s, 140ms apart) */
@media (min-width:768px){
  #tm-intro.tm-intro-light{background:#f3efe7}
  #tm-intro.tm-intro-light::before{background:linear-gradient(rgba(248,245,239,.42),rgba(248,245,239,.42)),var(--tm-paper) 50% 50%/cover no-repeat;opacity:1}
  #tm-intro.tm-intro-light .tm-intro-lede{color:#2f251d}
  #tm-intro.tm-intro-light .tm-intro-label{color:#5a4d42}
  html.tm-intro-motion #tm-intro.tm-intro-light::before{opacity:0;transition:opacity 1.6s cubic-bezier(.33,0,.2,1)}
  html.tm-intro-motion #tm-intro.tm-intro-light::after{opacity:0;transition:opacity 1.4s cubic-bezier(.33,0,.2,1) .5s}
  html.tm-intro-motion #tm-intro.tm-intro-light.is-in::before,html.tm-intro-motion #tm-intro.tm-intro-light.is-in::after{opacity:1}
  html.tm-intro-motion #tm-intro.tm-intro-light .tm-intro-words>*{transition-delay:calc(900ms + var(--tm-i,0)*140ms)}
}
/* lighter in the centre, darker at the edges, and the whole of it spawning from the centre (user, 4 Nov 2026): the wash is radial,
   the page's paper strong where the words sit and gone by the edges, which deepen a little; with motion the paper grows out of the
   centre as a widening circle, from soft and slightly large into focus (1.8s); the frame unfolds outward from the centre (from
   0.55s); the lines come into focus as they fade in (from 1s) */
@media (min-width:768px){
  #tm-intro.tm-intro-light::before{
    background:radial-gradient(ellipse 62% 70% at 50% 50%,rgba(248,245,239,.82) 0%,rgba(248,245,239,.55) 38%,rgba(248,245,239,.12) 72%,rgba(42,31,24,.16) 100%),
      var(--tm-paper) 50% 50%/cover no-repeat}
  html.tm-intro-motion #tm-intro.tm-intro-light::before{opacity:0;clip-path:circle(0% at 50% 50%);filter:blur(14px);scale:1.06;
    transition:clip-path 1.8s cubic-bezier(.22,.7,.2,1),opacity .9s ease,filter 1.8s cubic-bezier(.22,.7,.2,1),scale 2.2s cubic-bezier(.22,.7,.2,1)}
  html.tm-intro-motion #tm-intro.tm-intro-light.is-in::before{opacity:1;clip-path:circle(75% at 50% 50%);filter:blur(0);scale:1}
  html.tm-intro-motion #tm-intro.tm-intro-light::after{opacity:0;clip-path:inset(50% 50% 50% 50%);
    transition:clip-path 1.3s cubic-bezier(.22,.7,.2,1) .55s,opacity .6s ease .55s}
  html.tm-intro-motion #tm-intro.tm-intro-light.is-in::after{opacity:1;clip-path:inset(0 0 0 0)}
  html.tm-intro-motion #tm-intro.tm-intro-light .tm-intro-words>*{filter:blur(6px);
    transition:opacity 1.1s cubic-bezier(.33,0,.2,1),translate 1.3s cubic-bezier(.33,0,.2,1),filter 1.2s cubic-bezier(.33,0,.2,1);
    transition-delay:calc(1000ms + var(--tm-i,0)*140ms)}
  html.tm-intro-motion #tm-intro.tm-intro-light.is-in .tm-intro-words>*{filter:blur(0)}
}
@media (min-width:768px){#tm-intro.tm-intro-light{overflow:hidden}}   /* the paper grows from a little larger than the section: keep it inside */
/* the spawn opens vertically (user, 4 Nov 2026): a line across the middle widens up and down to the full height, the paper coming
   into focus as it opens; the frame opens the same way just after */
@media (min-width:768px){
  html.tm-intro-motion #tm-intro.tm-intro-light::before{clip-path:inset(50% 0 50% 0);scale:1 1.04;
    transition:clip-path 1.6s cubic-bezier(.65,0,.25,1),opacity .7s ease,filter 1.8s cubic-bezier(.22,.7,.2,1),scale 2s cubic-bezier(.22,.7,.2,1)}
  html.tm-intro-motion #tm-intro.tm-intro-light.is-in::before{clip-path:inset(0 0 0 0);scale:1}
  html.tm-intro-motion #tm-intro.tm-intro-light::after{clip-path:inset(50% 0 50% 0);
    transition:clip-path 1.3s cubic-bezier(.65,0,.25,1) .45s,opacity .5s ease .45s}
  html.tm-intro-motion #tm-intro.tm-intro-light.is-in::after{clip-path:inset(0 0 0 0)}
}
/* the hidden state takes hold at once: the timings above are for the arrival only (with them on the way out, the words set before the
   script ran lingered as a blurred ghost for a second) */
@media (min-width:768px){
  html.tm-intro-motion #tm-intro:not(.is-in) .tm-intro-words>*,
  html.tm-intro-motion #tm-intro:not(.is-in)::before,
  html.tm-intro-motion #tm-intro:not(.is-in)::after{transition:none!important}
}
/* Room Inspirations now follows straight on (4 Nov 2026 reorder): no strip of plain paper between the two */
@media (min-width:768px){html body #tm-showcase#tm-showcase{margin-top:0!important}}

/* two slides in the frame (user, 4 Nov 2026): the words, then Materials & Craft (moved in from its own section), one beside the other
   on a track that slides sideways (a swipe, a trackpad, or the thin black arrows at the frame's edges). The section is now one
   screen-ish tall, both slides centred in it; the four lines still arrive with the paper (above) and the arrows with them. */
@media (min-width:768px){
  #tm-intro.tm-intro-light{--ih:clamp(600px,calc(100svh - 150px),800px);--py:calc(.8cm + 44px);--px:clamp(72px,7vw,140px);
    height:var(--ih);padding:0}
  #tm-intro .tm-intro-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  #tm-intro .tm-intro-track::-webkit-scrollbar{display:none}
  #tm-intro .tm-intro-slide{flex:0 0 100%;min-width:0;height:100%;box-sizing:border-box;padding:var(--py) var(--px);scroll-snap-align:start;scroll-snap-stop:always}
  #tm-intro .tm-intro-words{display:flex;flex-direction:column;align-items:center;justify-content:center}
  /* the Materials & Craft slide: the close-up, three squares as tall as the slide allows, the words */
  #tm-intro #tm-materials{background:none;padding:var(--py) var(--px);color:#302f2a;
    --mat-gap:clamp(20px,2.2vw,32px);--mat-s:calc((var(--ih) - 2*var(--py) - 2*var(--mat-gap))/3);
    display:grid;grid-template-columns:minmax(0,40fr) var(--mat-s) minmax(0,41fr);column-gap:var(--mat-gap);align-items:stretch;text-align:left}
  #tm-intro #tm-materials .tm-mat-main{margin:0;width:100%;height:100%;contain:size;aspect-ratio:auto;max-height:none}
  #tm-intro #tm-materials .tm-mat-subs{display:grid;grid-template-columns:none;grid-template-rows:repeat(3,var(--mat-s));row-gap:var(--mat-gap);margin:0}
  #tm-intro #tm-materials .tm-mat-subs img{aspect-ratio:1;height:100%;filter:grayscale(1)}
  #tm-intro #tm-materials .tm-mat-text{align-self:center;margin:0;padding:0 clamp(16px,3vw,56px);text-align:center;text-shadow:0 0 22px rgba(255,255,255,.6)}
  #tm-intro #tm-materials #tm-mat-title{font-size:clamp(22px,1.8vw,27px)!important;line-height:1.2!important;color:#2a1f18}
  #tm-intro #tm-materials .tm-mat-text p{color:#2f251d}
  /* the arrows: thin, black, at the frame's inner edges, the one leading nowhere hidden */
  #tm-intro .tm-intro-arrow{position:absolute;top:50%;z-index:2;translate:0 -50%;display:grid;place-items:center;width:64px;height:48px;padding:0;
    border:0;background:none;color:#1d1b19;cursor:pointer;transition:opacity .5s ease,translate .5s ease}
  #tm-intro .tm-intro-arrow svg{width:46px;height:14px;overflow:visible}
  #tm-intro .tm-intro-next{right:calc(.8cm + 20px)}
  #tm-intro .tm-intro-prev{left:calc(.8cm + 20px)}
  #tm-intro .tm-intro-next:hover{translate:6px -50%}
  #tm-intro .tm-intro-prev:hover{translate:-6px -50%}
  #tm-intro .tm-intro-arrow:focus-visible{outline:1px solid #1d1b19;outline-offset:4px}
  #tm-intro[data-slide="0"] .tm-intro-prev,#tm-intro[data-slide="2"] .tm-intro-next{opacity:0;pointer-events:none}
  html.tm-intro-motion #tm-intro:not(.is-in) .tm-intro-arrow{opacity:0;transition:none}
}
/* the arrows arrive after the four lines, once (an animation, so the later swaps between them stay quick) */
@keyframes tm-intro-arrow-in{from{opacity:0}}
@media (min-width:768px){
  html.tm-intro-motion #tm-intro.is-in .tm-intro-arrow{animation:tm-intro-arrow-in 1s ease 1.7s backwards}
}
/* the Materials & Craft slide on plain paper, as its own section had it (user, 4 Nov 2026): it covers the grasses and the frame
   while it is on show; the back arrow sits nearer the edge so it clears the close-up */
@media (min-width:768px){
  #tm-intro #tm-materials{position:relative;z-index:0;background:#f3efe7}
  #tm-intro #tm-materials .tm-mat-text{text-shadow:none}
  #tm-intro[data-slide="1"] .tm-intro-prev{left:24px}
}
/* the arrows made clear (user, 4 Nov 2026: "so users don't miss it"; the circle around them was not liked): still the thin black
   line, a little longer and steadier, and the next arrow nudging toward the next slide every few seconds until someone has been there */
@keyframes tm-intro-nudge{0%,62%,100%{translate:0}70%{translate:8px}78%{translate:0}86%{translate:4px}94%{translate:0}}
@media (min-width:768px){
  #tm-intro .tm-intro-arrow{width:80px}
  #tm-intro .tm-intro-arrow svg{width:60px;height:18.3px;stroke-width:1.3}
  #tm-intro:not(.tm-moved)[data-slide="0"] .tm-intro-next svg{animation:tm-intro-nudge 3.2s ease-in-out 3s infinite}
  #tm-intro .tm-intro-next:hover svg{animation:none}
}
@media (prefers-reduced-motion:reduce){#tm-intro .tm-intro-next svg{animation:none!important}}
/* three slides (5 Nov 2026): Our Philosophy follows Materials & Craft. Next shows on the first two, back on the last two; on the dark
   philosophy slide the back arrow is light and sits on the dark ground just right of the photograph */
@media (min-width:768px){
  #tm-intro[data-slide="2"] .tm-intro-prev{left:calc(min(34vw,calc(var(--ih)*.76)) + 18px);color:#f3ede2}
  #tm-intro[data-slide="2"] .tm-intro-arrow:focus-visible{outline-color:#f3ede2}
}

/* the Materials & Craft slide in the same white frame as the first slide (user, 5 Nov 2026): 0.3cm thick, 0.5cm in from every edge;
   its own paper covers the section's frame, so it draws its own, over the photographs' edges and under the arrows */
@media (min-width:768px){
  #tm-intro #tm-materials::after{content:"";position:absolute;inset:.5cm;z-index:1;border:.3cm solid #fff;pointer-events:none}
  #tm-intro[data-slide="1"] .tm-intro-prev{left:calc(.8cm + 4px)}
}