/* TOMITA Phase 1 Visual System
   One quiet framework for typography, spacing, colour, motion and interface.
   The collection may change its world; Tomita controls the framing. */

:root{
  --tm-paper:#f3eee6;
  --tm-paper-soft:#f7f3ed;
  --tm-ink:#2a1f18;
  --tm-ink-soft:#655b53;
  --tm-charcoal:#1c1a18;
  --tm-white:#fff;
  --tm-line:rgba(42,31,24,.18);
  --tm-line-strong:rgba(42,31,24,.34);
  --tm-line-dark:rgba(255,255,255,.28);

  --tm-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --tm-sans:Inter,"Helvetica Neue",Arial,sans-serif;
  --tm-jp:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;

  --tm-display:clamp(2.65rem,5.15vw,5.4rem);
  --tm-title:clamp(1.95rem,3.15vw,3.2rem);
  --tm-heading:clamp(1.28rem,1.85vw,1.72rem);
  --tm-copy:clamp(14px,.98vw,15.5px);
  --tm-small:12px;
  --tm-label:10px;
  --tm-caption:10px;

  --tm-copy-leading:1.76;
  --tm-heading-leading:1.34;
  --tm-label-spacing:.24em;
  --tm-caption-spacing:.14em;

  --tm-edge:clamp(22px,3.6vw,56px);
  --tm-editorial-edge:clamp(44px,6.6vw,104px);
  --tm-space-xs:clamp(18px,2.2vw,30px);
  --tm-space-sm:clamp(34px,4.5vw,62px);
  --tm-space-md:clamp(64px,8.5vw,112px);
  --tm-space-lg:clamp(96px,14vh,180px);
  --tm-measure:34rem;

  --tm-ease:cubic-bezier(.22,1,.36,1);
  --tm-fast:320ms;
  --tm-medium:800ms;
  --tm-slow:1500ms;

  /* Kept for legacy components. Phase 1 removes orange as a routine UI accent. */
  --tomita:var(--tm-ink);
}

html{
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
}

body{
  font-family:var(--tm-sans);
  color:var(--tm-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.font-display{
  font-family:var(--tm-serif)!important;
  font-weight:400;
}

.font-jp{
  font-family:var(--tm-jp)!important;
  font-weight:400;
}

p{
  text-wrap:pretty;
}

h1,h2,h3,blockquote{
  text-wrap:balance;
}

::selection{
  background:rgba(42,31,24,.16);
}

:focus-visible{
  outline:1px solid currentColor!important;
  outline-offset:4px;
}

/* Navigation is calm and consistent; hierarchy comes from placement, not weight. */
#siteHead nav{
  font-family:var(--tm-serif)!important;
  font-weight:400!important;
}
#siteHead > div{
  padding-left:var(--tm-edge)!important;
  padding-right:var(--tm-edge)!important;
}
[data-sample-count]{
  color:inherit!important;
  opacity:.58;
}

/* One contextual link language: a hairline in the colour of the text itself. */
.lnk::after{
  background:currentColor!important;
  opacity:.68;
  transition:transform var(--tm-medium) var(--tm-ease)!important;
}

.tm-link{
  display:inline-block;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:opacity var(--tm-fast) ease;
}
.tm-link:hover{ opacity:.58; }

/* Existing orange utility accents become contextual ink/white instead of a brand stripe. */
[class*="text-[#fc8702]"]{ color:inherit!important; }
[class*="bg-[#fc8702]"]{ background-color:currentColor!important; }
[class*="border-[#fc8702]"]{ border-color:currentColor!important; }
[class*="decoration-[#fc8702]"]{ text-decoration-color:currentColor!important; }
[class*="hover:text-[#fc8702]"]:hover{ color:inherit!important; opacity:.62; }
[style*="color:#fc8702"]{ color:inherit!important; }
[style*="background:#fc8702"]{ background:currentColor!important; }

/* Booklet/navigation accents follow the same contextual rule. */
.bk-hint i,
.bk-cta i{ background:currentColor!important; }
.bk-dl svg{ color:currentColor!important; }
#booklet button[data-bk]:hover{ color:inherit!important; opacity:.65; }
#booklet .bk-nav:hover{
  color:#fff!important;
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.55)!important;
}

/* Photography stays square to the page. Material, not interface styling, carries character. */
img,video{ border-radius:0; }

figure img{
  backface-visibility:hidden;
}

/* Repeated image hovers are deliberately small. */
.group:hover img[class*="group-hover:scale"]{
  transform:scale(1.015)!important;
}

/* Shared editorial primitives for current and future pages. */
.tm-page-edge{
  padding-left:var(--tm-edge);
  padding-right:var(--tm-edge);
}
.tm-editorial-edge{
  padding-left:var(--tm-editorial-edge);
  padding-right:var(--tm-editorial-edge);
}
.tm-section-space{
  padding-top:var(--tm-space-lg);
  padding-bottom:var(--tm-space-lg);
}
.tm-measure{
  max-width:var(--tm-measure);
}
.tm-kicker,
.tm-label{
  font-family:var(--tm-sans);
  font-size:var(--tm-label);
  font-weight:500;
  line-height:1.35;
  letter-spacing:var(--tm-label-spacing);
  text-transform:uppercase;
}
.tm-copy{
  max-width:var(--tm-measure);
  font-family:var(--tm-serif);
  font-size:var(--tm-copy);
  line-height:var(--tm-copy-leading);
}
.tm-caption{
  font-family:var(--tm-sans);
  font-size:var(--tm-caption);
  font-weight:400;
  line-height:1.5;
  letter-spacing:var(--tm-caption-spacing);
}
.tm-rule{
  height:1px;
  background:currentColor;
  opacity:.22;
}

/* Image roles: the collection chooses content; the system chooses discipline. */
.tm-image-room{
  aspect-ratio:4/5;
  overflow:hidden;
}
.tm-image-landscape{
  aspect-ratio:16/10;
  overflow:hidden;
}
.tm-image-detail{
  aspect-ratio:1/1;
  overflow:hidden;
}
.tm-image-room>img,
.tm-image-landscape>img,
.tm-image-detail>img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Motion vocabulary: fade, small settle, user-led transformation. Nothing ornamental. */
html.rv-on [data-rv]{
  transform:translateY(6px);
  transition:
    opacity 1000ms cubic-bezier(.33,0,.2,1),
    transform 1100ms cubic-bezier(.33,0,.2,1);
}
html.rv-on [data-rv] .rv-c>img,
html.rv-on [data-rv] .rv-c>a>img{
  transform:scale(1.018);
  transition:transform var(--tm-slow) var(--tm-ease);
}
html.rv-on .tm-settle{
  animation-duration:2200ms;
}
html.rv-on .tm-rise{
  animation-duration:1100ms;
}
body{
  animation-duration:700ms;
}
html.leaving body{
  transition-duration:280ms;
}
.warm-tone{
  filter:none!important;
  transition:transform var(--tm-slow) var(--tm-ease)!important;
}
figure:hover .warm-tone{
  filter:none!important;
  transform:scale(1.015)!important;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

@media (max-width:767px){
  :root{
    --tm-edge:20px;
    --tm-editorial-edge:22px;
    --tm-space-lg:80px;
  }
}

/* Remove the last decorative orange traces on the homepage. */
.intro-line{
  background:currentColor!important;
  opacity:.26;
}
#homeGallery .g-cta{
  border-bottom-color:currentColor!important;
}