/* Inner Realm — site stylesheet.
   Built on the design system tokens; every value below resolves to a token in tokens/.
   Component styles mirror components/ (Button, NavBar, Footer, Accordion, Testimonial,
   PullQuote, ImageFrame, Motif, Eyebrow, Tilde, SubscribeForm). */
@import url("styles.css");

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--width-content);margin:0 auto;width:100%}
.section{padding:var(--section-y) var(--gutter)}
.section--raised{background:var(--surface-raised)}
.section--ink{background:var(--surface-inverse)}
.section--ink,.section--ink p{color:var(--text-on-dark)}
.prose{max-width:var(--width-prose)}
.stack{display:flex;flex-direction:column}
.stack-md{gap:var(--space-md)}
.stack-lg{gap:var(--space-lg)}
.stack-xl{gap:var(--space-xl)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:start}
.grid2--center{align-items:center}
.grid2--l{grid-template-columns:.85fr 1.15fr}
.grid2--r{grid-template-columns:1.1fr .9fr}
.grid2--portrait{grid-template-columns:.9fr 1.1fr}
.flow>*{margin:0}
.flow>*+*{margin-top:var(--space-md)}

/* ---------- type ---------- */
.eyebrow{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted);margin:0}
.eyebrow--on-dark{color:var(--text-on-dark-muted)}
.display{font:var(--weight-light) var(--size-display-lg)/var(--leading-display) var(--font-serif);color:var(--text-display);margin:0;letter-spacing:0}
.display--deco{font:var(--weight-regular) var(--size-display-md)/1 var(--font-display);letter-spacing:var(--tracking-display)}
.h2{font:var(--weight-light) var(--size-display-md)/var(--leading-display) var(--font-serif);color:var(--text-display);margin:0}
.h3{font:var(--type-heading);color:var(--text-display);margin:0}
.lede{font:var(--type-quote);color:var(--text-body);margin:0;max-width:var(--measure)}
.italic{font-style:italic}
.signature{font:var(--weight-regular) var(--size-heading)/1 var(--font-display);letter-spacing:var(--tracking-display);margin:0}
.tilde{font:var(--weight-light) 28px/1 var(--font-serif);color:var(--ink-300);letter-spacing:.1em}
.pullquote{font:italic var(--weight-light) var(--size-display-md)/1.28 var(--font-serif);color:var(--text-display);max-width:var(--measure-narrow);margin:0}

/* ---------- buttons ---------- */
.btn{font:var(--weight-regular) var(--size-label)/1 var(--font-utility);text-transform:uppercase;letter-spacing:var(--tracking-label);
  border:1px solid var(--line-strong);border-radius:var(--radius-none);background:transparent;color:var(--ink-900);
  padding:16px 32px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);cursor:pointer;
  text-decoration:none;white-space:nowrap;align-self:flex-start;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.btn:hover{background:var(--ink-900);color:var(--bone-100);border-color:var(--ink-900)}
.btn--lg{padding:20px 44px;font-size:.875rem}
.btn--sm{padding:11px 22px;font-size:var(--size-micro)}
.btn--solid{background:var(--ink-900);color:var(--bone-100);border-color:transparent}
.btn--solid:hover{background:var(--ink-700)}
.btn--on-dark{color:var(--bone-200);border-color:var(--line-on-dark)}
.btn--on-dark:hover{background:var(--bone-200);color:var(--ink-900);border-color:var(--bone-200)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--nav-height);display:flex;align-items:center;gap:var(--space-xl);
  padding:0 var(--gutter);background:rgba(13,12,11,.28);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.nav.is-scrolled{background:var(--bone-200);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:var(--line-hairline)}
.nav__links{display:flex;gap:var(--space-lg);flex:1 1 0}
.nav__link{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);text-decoration:none;border:0;
  color:var(--text-on-dark-muted);transition:color var(--dur-fast) var(--ease-out)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--bone-100);border:0}
.nav.is-scrolled .nav__link{color:var(--text-muted)}
.nav.is-scrolled .nav__link:hover,.nav.is-scrolled .nav__link[aria-current="page"]{color:var(--ink-900)}
.nav__mark{border:0;display:inline-block;line-height:0}
.nav__mark img{width:190px;height:auto}
.nav__mark .mark--dark{display:none}
.nav.is-scrolled .mark--light{display:none}
.nav.is-scrolled .mark--dark{display:block}
.nav__right{flex:1 1 0;display:flex;justify-content:flex-end;align-items:center}
/* the nav CTA follows the nav's own light/dark state (NavBar passes onDark={!scrolled}) */
.nav.is-scrolled .btn--on-dark,.nav.is-open .btn--on-dark{color:var(--ink-900);border-color:var(--line-strong);background:transparent}
.nav.is-scrolled .btn--on-dark:hover,.nav.is-open .btn--on-dark:hover{background:var(--ink-900);color:var(--bone-100);border-color:var(--ink-900)}
.nav__toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:86vh;min-height:520px;overflow:hidden}
.hero--short{height:72vh}
.hero--page{height:60vh;min-height:420px}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;background:var(--veil-full)}
.hero__grad{position:absolute;inset:0;background:var(--veil-bottom)}
.hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-4xl) var(--gutter) var(--space-3xl)}
.hero h1,.hero p{color:var(--text-on-dark)}
.hero__lede{font:var(--type-quote);max-width:34ch;margin:var(--space-md) 0 var(--space-xl)}
.hero__caps{font:var(--weight-regular) var(--size-display-md)/1.16 var(--font-display);
  letter-spacing:var(--tracking-display);text-transform:uppercase;margin:0;max-width:16ch}

/* ---------- figures ---------- */
.figure{margin:0;position:relative;overflow:hidden;background:var(--ink-800);border-radius:var(--radius-none)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}
.figure:hover img{transform:scale(1.02);filter:brightness(1.04)}
.ratio-square{aspect-ratio:1/1}
.ratio-tall{aspect-ratio:2/3}
.ratio-portrait{aspect-ratio:3/4}
.figure--arch{border-radius:var(--radius-arch)}
.motif{display:block;height:auto;opacity:.5}

/* ---------- accordion ---------- */
.acc{border-top:var(--border-hairline)}
.acc__row{border-bottom:var(--border-hairline)}
.acc__btn{width:100%;background:none;border:0;padding:var(--space-lg) 0;display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--space-md);cursor:pointer;text-align:left;color:var(--text-display)}
.acc__title{font:var(--weight-light) var(--size-subheading)/var(--leading-tight) var(--font-serif)}
.acc__sign{font:var(--weight-light) 1.25rem/1 var(--font-utility);color:var(--text-muted);
  transition:transform var(--dur-base) var(--ease-in-out)}
.acc__btn[aria-expanded="true"] .acc__sign{transform:rotate(45deg)}
.acc__panel{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--dur-base) var(--ease-in-out),opacity var(--dur-base) var(--ease-in-out)}
.acc__btn[aria-expanded="true"]+.acc__panel{grid-template-rows:1fr;opacity:1}
.acc__clip{overflow:hidden}
.acc__body{padding:0 0 var(--space-lg);max-width:var(--measure);font:var(--type-body);color:var(--text-body)}
.acc__body p{margin:0}
.acc__body p+p{margin-top:1em}
.acc__note{margin-top:1em!important;font:var(--type-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--text-muted)}

/* ---------- session callout ---------- */
.callout{background:var(--surface-card);border:var(--border-hairline);padding:var(--space-xl);
  max-width:var(--measure);display:flex;flex-direction:column;gap:var(--space-sm)}
.callout__title{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--text-muted);margin:0}
.callout p{margin:0;max-width:none}

/* ---------- offers ---------- */
.offers{border-top:var(--border-hairline)}
.offer{border-bottom:var(--border-hairline);padding:var(--space-lg) 0;
  display:flex;flex-direction:column;gap:var(--space-sm)}
.offer__name{font:var(--weight-light) var(--size-subheading)/var(--leading-tight) var(--font-serif);color:var(--text-display)}
.offer__meta{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.offer p{margin:0}

/* ---------- testimonial ---------- */
.quote{margin:0;max-width:var(--measure)}
.quote blockquote{margin:0;font:var(--type-body);color:var(--text-body)}
.quote blockquote p{margin:0;max-width:none}
.quote blockquote p+p{margin-top:1.1em}
.quote figcaption{margin-top:var(--space-md);font:italic var(--weight-light) var(--size-body-sm)/1.4 var(--font-serif);color:var(--text-muted)}

/* ---------- testimonial cards ----------
   The shell engraving is reused here as a single ghosted watermark bleeding off the right
   edge, rather than repeated per card — at this opacity it reads as paper texture behind
   the grid, which keeps the motif present without competing with four blocks of text. */
.testimonials{position:relative;overflow:hidden}
/* anchored to the content column, not the section, so it overlaps the rail's right edge by the
   same amount at every viewport width instead of drifting into the margin on wide screens */
.testimonials .wrap{position:relative}
.testimonials__shell{position:absolute;z-index:-1;top:50%;right:-150px;
  width:400px;height:auto;max-width:none;transform:translateY(-50%);
  opacity:.07;pointer-events:none;user-select:none}
/* The rail shows three cards and a sliver of the fourth — the peek is the affordance that
   says there is more to scroll. --per-view carries the fraction so the breakpoints only have
   to restate one number. */
.carousel{position:relative}
.cards{--per-view:3.18;
  position:relative;display:flex;gap:var(--space-lg);align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.cards::-webkit-scrollbar{display:none}
.cards:focus-visible{outline:1px solid var(--focus-ring);outline-offset:4px}
.card{flex:0 0 calc((100% - var(--space-lg) * 2) / var(--per-view));scroll-snap-align:start;
  display:flex;flex-direction:column;margin:0;max-width:none;
  background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-sm);
  padding:var(--space-xl)}
.card blockquote p{max-width:none}
/* auto margin pins every attribution to the card's baseline, whatever the quote's length */
.card figcaption{margin-top:auto;padding-top:var(--space-lg)}
/* The arrows straddle the rail's edges and surface on hover, so they cost no vertical space —
   the whole card stays visible on short screens. Kept in the tab order and revealed on focus. */
.carousel__btn{position:absolute;top:50%;z-index:2;
  display:none;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;cursor:pointer;color:var(--text-muted);
  background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);
  font:var(--weight-light) 1.4rem/1 var(--font-utility);
  opacity:0;transform:translateY(-50%);
  transition:opacity var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
/* no JS means no clones to loop through, so the rail is a plain scroller and the arrows would lie */
.js .carousel__btn{display:inline-flex}
.carousel__btn--prev{left:calc(var(--space-md) * -1)}
.carousel__btn--next{right:calc(var(--space-md) * -1)}
.carousel:hover .carousel__btn,.carousel__btn:focus-visible{opacity:1}
.carousel__btn:hover{color:var(--text-display);border-color:var(--line-strong)}
/* touch has no hover, and a persistent arrow would sit on top of the card text — the peeking
   next card carries the affordance there instead */
@media (hover:none){.js .carousel__btn{display:none}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-xs)}
.field label{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-on-dark-muted)}
.field input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-on-dark);border-radius:var(--radius-sm);
  padding:12px 0;font:var(--weight-light) var(--size-body-sm)/1.5 var(--font-serif);color:var(--text-on-dark);outline:none;
  transition:border-color var(--dur-fast) var(--ease-out)}
.field input:focus{border-bottom-color:var(--bone-200)}
.subscribe{display:flex;flex-direction:column;gap:var(--space-md);max-width:420px;align-items:center;text-align:center;margin:0 auto}
.subscribe .field{width:100%;text-align:left}
.subscribe__note{margin:0;font:var(--type-label);color:var(--text-on-dark-muted)}
.subscribe .consent{display:flex;align-items:flex-start;gap:var(--space-xs);width:100%;text-align:left;
  font:var(--type-label);letter-spacing:normal;text-transform:none;color:var(--text-on-dark-muted)}
.subscribe .consent input{flex:0 0 auto;margin:.15em 0 0;accent-color:var(--bone-200)}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.footer{background:var(--surface-inverse);color:var(--text-on-dark);
  padding:var(--space-3xl) var(--gutter) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-2xl);align-items:center}
.footer img.mark{width:320px;height:auto}
.ack{max-width:var(--measure);display:flex;flex-direction:column;gap:1em;text-align:center}
.ack p{margin:0;max-width:none;font:italic var(--weight-light) var(--size-body-sm)/var(--leading-body) var(--font-serif);color:var(--text-on-dark-muted)}
.footer__cols{width:100%;max-width:var(--width-content);border-top:1px solid var(--line-on-dark);padding-top:var(--space-lg);
  display:flex;flex-wrap:wrap;gap:var(--space-lg) var(--space-2xl);justify-content:space-between}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg)}
.footer li{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.footer a{color:var(--text-on-dark-muted);border-bottom:1px solid transparent;text-decoration:none}
.footer a:hover{color:var(--bone-100);border-bottom-color:var(--bone-100)}
.footer__credit{margin:0;font:var(--size-micro)/1 var(--font-utility);letter-spacing:.08em}

/* ---------- text pages (legal, contact) ---------- */
.page{padding:calc(var(--nav-height) + var(--section-y)) var(--gutter) var(--section-y)}
.page__title{margin:0 0 var(--space-2xl);font:var(--weight-light) var(--size-display-md)/var(--leading-display) var(--font-serif);color:var(--text-display)}
.legal{max-width:var(--width-prose)}
.legal p{margin:0 0 1.25em;max-width:none}
.legal h2{margin:var(--space-2xl) 0 var(--space-md);font:var(--weight-light) var(--size-heading)/var(--leading-heading) var(--font-serif);color:var(--text-display)}
.legal h3{margin:var(--space-xl) 0 var(--space-sm);font:var(--weight-regular) var(--size-body)/var(--leading-tight) var(--font-utility);
  text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:var(--size-label);color:var(--text-muted)}
.legal h2:first-child,.legal h3:first-child{margin-top:0}
.legal ul,.legal ol{margin:0 0 1.25em;padding-left:1.4em}
.legal li{margin:0 0 .5em}
.legal a{color:var(--text-body);border-bottom:1px solid var(--line-strong)}
.legal a:hover{color:var(--text-accent);border-bottom-color:var(--text-accent)}
.legal strong{font-weight:var(--weight-medium)}
.legal hr{margin:var(--space-2xl) 0}

/* light-background form fields (contact) — the .field defaults are for the ink subscribe block */
.field--light label{color:var(--text-muted)}
.field--light input,.field--light textarea{color:var(--text-body);border-color:var(--line-strong)}
.field--light input:focus,.field--light textarea:focus{border-color:var(--ochre-500)}
.field--light textarea{width:100%;background:transparent;border:1px solid var(--line-hairline);border-radius:var(--radius-sm);
  padding:var(--space-sm);font:var(--weight-light) var(--size-body-sm)/var(--leading-tight) var(--font-serif);
  outline:none;resize:vertical;transition:border-color var(--dur-fast) var(--ease-out)}
.contact-form{display:flex;flex-direction:column;gap:var(--space-lg);max-width:520px}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:8px;z-index:60;background:var(--bone-100);color:var(--ink-900);padding:10px 16px;border:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid2,.grid2--l,.grid2--r,.grid2--portrait{grid-template-columns:1fr;gap:var(--space-2xl)}
  .cards{--per-view:2.15;gap:var(--space-md)}
  .card{flex-basis:calc((100% - var(--space-md)) / var(--per-view));padding:var(--space-lg)}
  .testimonials__shell{width:240px;top:auto;bottom:calc(var(--space-xl) * -1);right:-90px;transform:none;opacity:.05}
  .nav__mark img{width:150px}
  .nav__links{gap:var(--space-md)}
  .hero{height:74vh}
  .footer img.mark{width:240px}
  .footer__cols{gap:var(--space-lg)}
}
@media (max-width:620px){
  :root{--nav-height:72px}
  .nav{gap:var(--space-md)}
  .nav__links{display:none}
  .nav.is-open .nav__links{display:flex;position:absolute;top:var(--nav-height);left:0;right:0;flex-direction:column;
    gap:var(--space-md);padding:var(--space-lg) var(--gutter);background:var(--bone-200);border-bottom:var(--border-hairline)}
  .nav.is-open .nav__link{color:var(--ink-900)}
  .nav__toggle{display:inline-flex;background:none;border:0;cursor:pointer;padding:8px;order:-1;
    font:var(--weight-light) 1.25rem/1 var(--font-utility);color:var(--text-on-dark-muted)}
  .nav.is-scrolled .nav__toggle,.nav.is-open .nav__toggle{color:var(--ink-900)}
  .nav__mark{flex:1 1 auto;text-align:center}
  .nav__mark img{width:132px;margin:0 auto}
  .hero__inner{padding:var(--space-2xl) var(--gutter)}
  .cards{--per-view:1.12}
  body{font-size:var(--size-body-sm)}
}