/* the header slides away on the way down and back on the way up (tomita-header-scroll-*.js); "translate" so it never fights the
   headers' own transforms. In the tomita-type layer, declared first in each <head>, above the older header rules. */
@layer tomita-type{
  html body #siteHead,html body header.tomita-unified-header{transition:translate .45s cubic-bezier(.33,0,.2,1),background-color .4s ease!important}
  html body #siteHead.tm-away,html body header.tomita-unified-header.tm-away{translate:0 -105%!important;pointer-events:none}
  /* the collection pages' column that sat 112px down, under the header, moves up while the header is away */
  html body .story-scroll{transition:top .45s cubic-bezier(.33,0,.2,1)}
  html.tm-head-away body .story-scroll{top:24px!important}
}
@media (prefers-reduced-motion:reduce){html body #siteHead,html body header.tomita-unified-header{transition:none!important}}

/* The header made calmer (user, 5 Nov 2026, after Promemoria's): one face and size for every word, thin vertical rules between the
   groups (menu | links, words | icons), the icons the same size and evenly spaced, a hairline beneath, and a line that draws in
   under a word on hover. Same dark ground; same height, so nothing below it moves. */
@layer tomita-type{
  html body :is(#siteHead,header.tomita-unified-header){border-bottom:1px solid rgba(255,255,255,.09)!important}
  html body :is(#siteHead,header.tomita-unified-header) :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a{
    font:400 15px/20px "PT Serif",Georgia,serif!important;letter-spacing:.015em!important;color:var(--hd-ink,rgba(255,255,255,.9))!important;opacity:1!important;min-height:0!important;
    transition:color .3s ease,background-size .45s cubic-bezier(.33,0,.2,1)!important}
  html body :is(#siteHead,header.tomita-unified-header) :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a:is(:hover,:focus-visible){color:var(--hd-ink-h,#fff)!important}
  /* the words: a hairline drawn in from the left on hover */
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Primary] a,
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a[href^="sample"]{
    background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat!important;padding-bottom:3px!important}
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Primary] a:is(:hover,:focus-visible),
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a[href^="sample"]:is(:hover,:focus-visible){background-size:100% 1px!important}
  /* the icons: one size, evenly spaced */
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a:not([href^="sample"]){display:flex!important;align-items:center;width:auto!important;
    padding:0 0 0 22px!important;border-left:0!important;height:20px!important}
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a svg{flex:none!important;width:20px!important;height:20px!important}
  html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a:not([href^="sample"]):hover{opacity:.7!important}
  @media (min-width:768px){
    /* menu | Our Collections  Contact Us */
    html body :is(#siteHead,header.tomita-unified-header) .head-burger{padding-right:26px!important}
    html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Primary]{border-left:1px solid var(--hd-rule,rgba(255,255,255,.26))!important;padding-left:26px!important;
      gap:30px!important;align-items:center;height:22px!important;min-height:0!important}
    /* Request a Sample | search  find  account */
    html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a[href^="sample"]{margin-right:14px!important;padding-right:0!important}
    html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a[href*="#search"]{border-left:1px solid var(--hd-rule,rgba(255,255,255,.26))!important;padding-left:26px!important;
      height:22px!important}
  }
  @media (max-width:767px){
    html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a:not([href^="sample"]){padding-left:18px!important}
  }
}

/* The logo folds into the signature T (user, 5 Nov 2026): the full wordmark only on the first screen of the home page
   (html.tm-logo-full, tomita-header-scroll-*.js). The image is narrowed to its left-hand square, the T (193 of its 900px; 197 tall),
   so it is the same sharp picture; the change is a slow fold of the width, the name sliding away to the right. */
@layer tomita-type{
  html body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){
    --lh:26px;height:var(--lh)!important;width:calc(var(--lh)*.98)!important;max-width:none!important;object-fit:cover!important;object-position:0 50%!important}
  html.tm-logo-ready body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){
    transition:width .7s cubic-bezier(.33,0,.2,1),height .7s cubic-bezier(.33,0,.2,1)!important}
  html.tm-logo-full body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){
    width:calc(var(--lh)*4.5685)!important}
  /* the T alone reads a little small at the wordmark's height: a touch taller */
  html:not(.tm-logo-full) body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:30px}
  @media (max-width:767px){
    html body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:21px}
    html:not(.tm-logo-full) body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:25px}
  }
  @media (prefers-reduced-motion:reduce){html.tm-logo-ready body :is(#siteHead a.head-plaque img,header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){transition:none!important}}
}

/* The header white (user, 5 Nov 2026: "white header is so much nicer"), on every page: white ground, a hairline beneath, every word,
   rule and icon in ink, the logo in its own dark. The home page keeps its light-on-photograph header over the first screen (the hero),
   and turns white with the rest once the page moves on. Its logo was drawn as a white mask of the whole wordmark (index.html,
   "solid-header-black-only"); now the logo image itself shows in every state, so it folds into the T like the others. */
@layer tomita-type{
  html body header.tomita-unified-header.tomita-unified-header,
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal){--hd-rule:rgba(48,47,42,.22);--hd-ink:#2a1f18;--hd-ink-h:#000;background:#fff!important;color:#2a1f18!important;
    border-bottom:1px solid rgba(48,47,42,.1)!important;box-shadow:none!important}
  html body header.tomita-unified-header.tomita-unified-header :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a,
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a{color:#2a1f18!important}
  html body header.tomita-unified-header.tomita-unified-header :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a:is(:hover,:focus-visible),
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a:is(:hover,:focus-visible){color:#000!important}
  html body header.tomita-unified-header.tomita-unified-header .head-burger span,
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) .head-burger span{background:#2a1f18!important}
  html body header.tomita-unified-header.tomita-unified-header :is(svg,button),
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) :is(nav svg,button){color:#2a1f18!important}
  html body header.tomita-unified-header.tomita-unified-header .head-burger,
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) .head-burger{color:#2a1f18!important}
  html body header.tomita-unified-header.tomita-unified-header .tomita-unified-brand img,
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) .head-plaque img[src*="logo-wordmark"]{filter:none!important}
  /* the home logo: the image in every state (white over the photograph, ink on white), no mask */
  html body #siteHead#siteHead .head-plaque::before{content:none!important;display:none!important}
  html body #siteHead#siteHead .head-plaque .hero-wordmark{opacity:1!important}
  html body #siteHead#siteHead:is(.is-over-hero,.is-over-charcoal) .head-plaque img[src*="logo-wordmark"]{filter:brightness(0) invert(1)!important}
}

/* Bigger (user, 5 Nov 2026: "make the header and logo bigger"): the header 104px tall on a computer (was 91), 84px on a phone (was 78;
   the phone home page's own header 72, was 64); the logo larger in both its forms (the T 40px tall, the full name 32px), the words
   16px and the icons 22px. The pages that size themselves to the window less the header use 104px (visit, compare, customize). */
@layer tomita-type{
  @media (min-width:768px){
    html body header.tomita-unified-header.tomita-unified-header,
    html body header.tomita-unified-header.tomita-unified-header>div{height:104px!important;min-height:104px!important;max-height:104px!important}
    html body #siteHead#siteHead>div{height:87px!important;min-height:87px!important}
    html body header.tomita-unified-header.tomita-unified-header .tomita-unified-brand{top:50%!important;translate:none!important;transform:translate(-50%,-50%)!important}
    html body #siteHead#siteHead .head-plaque{top:50%!important;height:auto!important;transform:translate(-50%,-50%)!important}
    html body :is(#siteHead,header.tomita-unified-header) :is(nav[aria-label=Primary],nav[aria-label=Enquiries]) a{font-size:16px!important;line-height:22px!important}
    html body :is(#siteHead,header.tomita-unified-header) nav[aria-label=Enquiries] a svg{width:22px!important;height:22px!important}
    html body :is(#siteHead,header.tomita-unified-header) .head-burger span{width:30px!important}
  }
  @media (max-width:767px){
    html body header.tomita-unified-header.tomita-unified-header,
    html body header.tomita-unified-header.tomita-unified-header>div{height:84px!important;min-height:84px!important}
    html body #tm-b-site-header#tm-b-site-header{height:72px!important;min-height:72px!important}
  }
  /* the logo, both forms */
  html body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:32px}
  html:not(.tm-logo-full) body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:40px}
  @media (max-width:767px){
    html body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:25px}
    html:not(.tm-logo-full) body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:32px}
  }
}


/* "TOKYO" under the logo (user, 5 Nov 2026, after Dedar's "MILANO"): small spaced capitals, centred beneath the logo in both its
   forms, in the header's own ink (white over the home photograph, dark on white). The logo and the word stand as one group, centred
   in the header. */
@layer tomita-type{
  html body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark){
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;height:auto!important}
  html body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark)::after{
    content:"TOKYO";display:block;padding-left:.34em;font:500 10px/1 Inter,Arial,sans-serif;letter-spacing:.34em;color:currentColor;white-space:nowrap}
  html body #siteHead#siteHead:is(.is-over-hero,.is-over-charcoal) a.head-plaque{color:#fff!important}
  html body #siteHead#siteHead:not(.is-over-hero):not(.is-over-charcoal) a.head-plaque,
  html body header.tomita-unified-header.tomita-unified-header .tomita-unified-brand,
  html body #tm-b-site-header .site-wordmark{color:#2a1f18!important}
  @media (max-width:767px){
    html body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark){gap:5px!important}
    html body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark)::after{font-size:8.5px;letter-spacing:.3em;padding-left:.3em}
  }
}
/* "TOKYO" under the T (user, 5 Nov 2026: "looks off"): the word exactly as wide as the T square, its letters spread to that width, a
   little smaller and closer, so the two read as one mark; under the full name (home, first screen) it stays as above. */
@layer tomita-type{
  html:not(.tm-logo-full) body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark){gap:6px!important}
  html:not(.tm-logo-full) body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark)::after{
    content:"T O K Y O";width:39px;padding-left:0;letter-spacing:0;word-spacing:0;font-size:8.5px;text-align:justify;text-align-last:justify}
  @media (max-width:767px){
    html:not(.tm-logo-full) body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark){gap:5px!important}
    html:not(.tm-logo-full) body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark)::after{width:31px;font-size:7px}
  }
}
/* Folded (user, 5 Nov 2026): the T a little bigger, and "TOKYO" only under the full name (home, first screen), not under the T. */
@layer tomita-type{
  html:not(.tm-logo-full) body :is(#siteHead a.head-plaque,header.tomita-unified-header .tomita-unified-brand,#tm-b-site-header .site-wordmark)::after{content:none!important;display:none!important}
  html:not(.tm-logo-full) body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:48px}
  @media (max-width:767px){
    html:not(.tm-logo-full) body :is(#siteHead a.head-plaque img[src*="logo-wordmark"],header.tomita-unified-header .tomita-unified-brand img,#tm-b-site-header .site-wordmark img){--lh:38px}
  }
}

/* Keyboard use (6 Nov 2026 accessibility pass): every link, button and field shows where the keyboard is, with a clear orange ring;
   and a "Skip to content" link is the first thing on every page, hidden until it has the keyboard's focus. */
@layer tomita-type{
  html body :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #fc8702!important;outline-offset:3px!important}
  html body a.tm-skip{position:fixed!important;left:16px!important;top:-80px!important;z-index:1000!important;padding:12px 20px!important;
    background:#2b2a27!important;color:#fff!important;font:500 12px/1 Inter,Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;text-decoration:none!important}
  html body a.tm-skip:focus{top:16px!important}
}