/* ============================================================
   PAGE LAYER — index.html only. Composition of the thirteen
   components; every value below is a token from the theme.
   ============================================================ */

/* Header — treatment 02 "solid rule": opaque surface, permanent line border,
   shadow-1 once condensed. Condenses past 100px (is-condensed, set in js). */
.site-header{background:var(--surface-card);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--border-card);transition:box-shadow var(--duration) var(--ease-brand)}
.site-header.is-scrolled{border-bottom-color:var(--border-card)}
.site-header.is-condensed{box-shadow:var(--shadow-1)}
.site-header__bar{min-height:calc(var(--s)*20);transition:min-height var(--duration) var(--ease-brand)}
.site-header.is-condensed .site-header__bar{min-height:calc(var(--s)*14)}
/* Header lockup — mark, hairline rule, name over role line (horizontal mock-up) */
.wordmark--lockup{flex-direction:row;align-items:center;gap:calc(var(--s)*2)}
.wordmark__rule{width:1px;align-self:stretch;margin-block:calc(var(--s)*2);background:var(--border-card)}
.wordmark__text{display:flex;flex-direction:column;gap:calc(var(--s)*1)}
.wordmark--lockup .wordmark__name{font-size:1.4rem;font-weight:normal;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.wordmark--lockup .wordmark__role{font-size:0.52rem;font-weight:var(--weight-medium);letter-spacing:var(--text-meta--letter-spacing);text-transform:uppercase;color:var(--text-muted);line-height:1.1}
@media (max-width:47.99rem){.wordmark--lockup .wordmark__role{display:none}}
.site-header.is-condensed .wordmark__role{display:none}
.wordmark__badge{width:calc(var(--s)*11);height:calc(var(--s)*11);border-radius:var(--radius-sm);transition:width var(--duration) var(--ease-brand),height var(--duration) var(--ease-brand)}
.site-header.is-condensed .wordmark__badge{width:calc(var(--s)*9);height:calc(var(--s)*9)}
.wordmark__name{font-size:var(--text-body)}
/* 44×44 minimum target — the component default is narrower than the spec allows */
.nav-panel .nav-link{min-width:var(--target-min);justify-content:center;padding-inline:calc(var(--s)*4)}
.nav-panel .btn{white-space:nowrap}
.site-header.is-condensed .nav-panel .btn{padding-block:calc(var(--s)*2)}
@media (prefers-reduced-motion: reduce){
  .site-header,.site-header__bar,.wordmark__badge{transition:none}
}
.icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* Hero — five slides, each with its own background film, no figure column.
   Copy sits left over the footage; the scrim is heaviest behind the text.
   Measured over these five clips: ink-900 holds 5.3:1 at 65% white, white holds
   6.0:1 at 75% ink-900 — so the light slides use 86%/68% white and the dark ones
   86%/70% ink-900, both clear of AA across every frame. */
.hero{padding-block:0;position:relative;overflow:hidden;transition:background-color var(--duration) var(--ease-brand)}
.hero.is-light{background:var(--surface-page)}
.hero.is-deep{background:var(--surface-footer)}
.hero .container{position:relative}
.slides{position:relative}
/* Stacked track: every slide shares one grid cell, so the hero is always as tall
   as the tallest slide and no slide changes height when it becomes current. */
.slides.is-stacked{display:grid}
.slides.is-stacked>.slide{grid-area:1/1}
.slides.is-stacked>.slide[aria-hidden="true"]{visibility:hidden}
.slide{display:grid;padding-block:calc(var(--s)*16) calc(var(--s)*20);align-items:center;position:relative}
.slide[hidden]{display:none}
@media (min-width:64rem){.slide{padding-block:calc(var(--s)*24) calc(var(--s)*28);min-height:calc(var(--s)*150)}}
.js .slides:not(.is-stacked) .slide{animation:slide-in var(--duration-slow) var(--ease-brand) both}
.js .slides.is-stacked .slide.is-current{animation:slide-in var(--duration-slow) var(--ease-brand) both}
@keyframes slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* copy column — wider now that nothing sits beside it */
.slide__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:34rem}
/* Copy plate — for slides whose footage is too busy behind the text for the
   gradient scrim alone. Alphas measured per clip; see tokens/colors.css. */
.slide--plate .slide__copy{background:var(--plate-light);border-radius:var(--radius-lg);padding:calc(var(--s)*6) calc(var(--s)*6) calc(var(--s)*7)}
.slide--plate.slide--deep .slide__copy{background:var(--plate-deep)}
@media (min-width:64rem){.slide--plate .slide__copy{padding:calc(var(--s)*9) calc(var(--s)*10) calc(var(--s)*10)}}
@media (min-width:64rem){.slide__copy{max-width:42rem}}
.slide__copy .eyebrow{margin-bottom:calc(var(--s)*4)}
.display{font-size:var(--text-display);font-weight:var(--text-display--weight);line-height:var(--text-display--line-height);letter-spacing:var(--text-display--letter-spacing);color:var(--text-primary);max-width:16ch;margin:0}
.display__accent{color:var(--color-brand-500)}
.slide__lede{margin-top:calc(var(--s)*6)}
.slide__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}
.slide__words{margin-top:calc(var(--s)*8)}

/* background film — full-bleed behind the container */
.slide__bg{position:absolute;inset-block:0;left:50%;width:100vw;margin-left:-50vw;overflow:hidden;background:var(--surface-footer)}
.slide--light .slide__bg{background:var(--surface-section-tint)}
.slide__video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--duration-slow) var(--ease-brand)}
.slide__video.is-playing{opacity:1}
.slide__bg::after{content:"";position:absolute;inset:0}
.slide--deep .slide__bg::after{background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-strong) 45%,var(--scrim-soft) 100%)}
.slide--light .slide__bg::after{background:linear-gradient(90deg,var(--scrim-light-strong) 0%,var(--scrim-light-strong) 45%,var(--scrim-light-soft) 100%)}
@media (max-width:63.99rem){
  .slide--deep .slide__bg::after{background:var(--scrim-strong)}
  .slide--light .slide__bg::after{background:var(--scrim-light-strong)}
}

/* dark slides — ink-inverse on the ink-900 scrim (approved pair) */
.slide--deep{color:var(--text-on-dark)}
.slide--deep .display{color:var(--text-on-dark)}
.slide--deep .display__accent{color:var(--color-brand-100)}
.slide--deep .lede{color:var(--color-line)}
.slide--deep .eyebrow{color:var(--color-brand-100)}
.slide--deep .btn--secondary{border-color:var(--color-line);color:var(--text-on-dark)}
.slide--deep .btn--secondary:hover{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.slide--deep .meta{color:var(--color-line)}
.slide--deep .tag{background:var(--color-ink-700);color:var(--text-on-dark)}
.slide--deep :focus-visible{outline-color:var(--focus-ring-on-dark)}

/* light slides — ink-900 on the white scrim; meta steps up from ink-400 */
.slide--light .eyebrow,.slide--light .meta{color:var(--text-muted)}

@media (prefers-reduced-motion: reduce){
  .slide__video{transition:none}
  .js .slide,.js .slides.is-stacked .slide.is-current{animation:none}
}

/* Carousel controls */
.carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--s)*4);padding-block:calc(var(--s)*4);border-top:1px solid var(--border-card)}
.hero.is-deep .carousel__controls{border-top-color:var(--color-ink-700)}
.carousel__dots{display:flex;gap:calc(var(--s)*1);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.dot{display:inline-flex;align-items:center;gap:calc(var(--s)*2);min-height:var(--target-min);min-width:var(--target-min);padding:0 calc(var(--s)*3);border:0;background:none;border-radius:var(--radius);cursor:pointer;font:var(--weight-medium) var(--text-meta)/1 var(--font-sans);letter-spacing:var(--text-meta--letter-spacing);text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dot::before{content:"";width:calc(var(--s)*2);height:calc(var(--s)*2);border-radius:var(--radius);background:var(--border-card);transition:background-color var(--duration-fast) var(--ease-brand)}
.dot[aria-current="true"]{color:var(--interactive-hover)}
.dot[aria-current="true"]::before{background:var(--interactive-hover);width:calc(var(--s)*6)}
.dot__name{display:none}
@media (min-width:64rem){.dot__name{display:inline}}
.hero.is-deep .dot{color:var(--color-line)}
.hero.is-deep .dot[aria-current="true"]{color:var(--text-on-dark)}
.hero.is-deep .dot[aria-current="true"]::before{background:var(--text-on-dark)}
.hero.is-deep .dot::before{background:var(--color-ink-700)}
.carousel__buttons{display:flex;gap:calc(var(--s)*2)}
.ctrl{display:inline-flex;align-items:center;justify-content:center;width:var(--target-min);height:var(--target-min);border:1px solid var(--border-card);border-radius:var(--radius);background:transparent;color:var(--text-primary);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-brand),color var(--duration-fast) var(--ease-brand)}
.ctrl:hover{border-color:var(--interactive);color:var(--interactive)}
.ctrl svg{width:20px;height:20px}
.hero.is-deep .ctrl{border-color:var(--color-ink-700);color:var(--text-on-dark)}
.hero.is-deep .ctrl:hover{border-color:var(--text-on-dark)}
.hero.is-deep :focus-visible{outline-color:var(--focus-ring-on-dark)}
.ctrl .icon-play{display:none}
.ctrl[aria-pressed="true"] .icon-pause{display:none}
.ctrl[aria-pressed="true"] .icon-play{display:block}

/* slide opacity on slider */

:root { --plate-light: rgba(255,255,255,.94); --plate-deep: rgba(50,48,61,.92); }

/* Stats band — four tiles at lg */
.stats-band{padding-block:calc(var(--s)*10);border-bottom:1px solid var(--border-card)}
.stats--4{gap:calc(var(--s)*8)}
@media (min-width:48rem){.stats--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.stats--4{grid-template-columns:repeat(4,1fr)}}
.stat__sub{font-size:var(--text-sm);color:var(--text-secondary)}
.stat .eyebrow{margin-top:calc(var(--s)*2)}

/* Work grid — three up at lg */
@media (min-width:64rem){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card__desc{color:var(--text-secondary);font-size:var(--text-sm)}
.card .tags{margin-top:calc(var(--s)*2)}
.card__cta{display:inline-flex;align-items:center;gap:calc(var(--s)*2);margin-top:calc(var(--s)*3);color:var(--interactive);font-weight:var(--weight-medium);font-size:var(--text-sm)}
.sec-head__link{display:inline-flex;align-items:center;gap:calc(var(--s)*2);min-height:var(--target-min);margin-top:calc(var(--s)*2)}

/* Writing — Substack. Horizontal media rows on surface-alt: image left, copy right.
   Hover matches the card component: border to brand-600 plus a 2px lift. */
.wr__head{display:grid;gap:calc(var(--s)*5);align-items:end;margin-bottom:calc(var(--s)*10)}
@media (min-width:64rem){.wr__head{grid-template-columns:1fr auto}}
.wr__head .h2{margin-top:calc(var(--s)*3)}
.mrows{list-style:none;margin:0;padding:0}
.mrows li+li{margin-top:calc(var(--s)*6)}
.mrow{display:grid;gap:calc(var(--s)*6);background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:border-color var(--duration-fast) var(--ease-brand),transform var(--duration-fast) var(--ease-brand)}
@media (min-width:48rem){.mrow{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0}}
.mrow:hover,.mrow:focus-visible,.mrow:focus-within{border-color:var(--interactive);transform:translateY(calc(var(--s) * -0.5))}
.mrow__media{overflow:hidden}
.mrow__media .placeholder{aspect-ratio:4/3;height:100%}
.mrow__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.mrow__body{display:flex;flex-direction:column;gap:calc(var(--s)*3);padding:calc(var(--s)*7)}
.mrow__meta{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);font-size:var(--text-meta);letter-spacing:var(--text-meta--letter-spacing);text-transform:uppercase;color:var(--text-meta-color)}
.mrow__meta .num{font-variant-numeric:tabular-nums}
.mrow__title{font-size:var(--text-h3);font-weight:var(--weight-bold);letter-spacing:var(--text-h3--letter-spacing);line-height:var(--text-h3--line-height)}
.mrow__sum{font-size:var(--text-sm);color:var(--text-secondary)}
.mrow__cta{display:inline-flex;align-items:center;gap:calc(var(--s)*2);margin-top:auto;padding-top:calc(var(--s)*3);color:var(--interactive-hover);font-weight:var(--weight-medium);font-size:var(--text-sm)}
@media (prefers-reduced-motion: reduce){.mrow:hover,.mrow:focus-visible,.mrow:focus-within{transform:none}}

/* About — offset accent frame. Portrait in the figure frame with a brand-50
   block set behind and offset; copy and both pill groups to the right. */
.about{display:grid;gap:calc(var(--s)*12)}
@media (min-width:64rem){.about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--s)*16);align-items:start}}
.about__media{position:relative;padding:calc(var(--s)*4) 0 0 calc(var(--s)*4)}
.about__media::before{content:"";position:absolute;inset:0 calc(var(--s)*8) calc(var(--s)*8) 0;background:var(--color-brand-50);border-radius:var(--radius-lg)}
.about__media .figure{position:relative;margin:0}
.about__media .figure__frame{aspect-ratio:4/5}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__media figcaption{text-align:center;var(--text-sm);color:var(--text-muted);margin-top:calc(var(--s)*3)}
.about__body .h2{margin-top:calc(var(--s)*3)}
.about__body .body-2{margin-top:calc(var(--s)*5)}
.about__body .eyebrow{display:block}
.about__body h3.eyebrow{margin-top:calc(var(--s)*8);margin-bottom:calc(var(--s)*3)}
.about__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}


/* Contact — photographic band. Mount Fuji plate behind ink-inverse text.
   Scrim measured against the real image: white text is 8.2:1 at scrim-strong
   (left, where the copy sits) and 5.05:1 at scrim-soft (right). Falls back to
   surface-deep if the image fails or the browser refuses image-set(). */
.contact-band{position:relative;isolation:isolate;background:var(--surface-footer) center/cover no-repeat;color:var(--text-on-dark)}
@media (min-width:48rem){
  .contact-band{background-image:image-set(url("../assets/Images/footer-bg-1920.webp") type("image/webp"),url("../assets/Images/footer-bg-1920.jpg") type("image/jpeg"))}
}
@media (max-width:47.99rem){
  .contact-band{background-image:image-set(url("../assets/Images/footer-bg-960.webp") type("image/webp"),url("../assets/Images/footer-bg-960.jpg") type("image/jpeg"))}
}
.contact-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-strong) 45%,var(--scrim-soft) 100%)}
@media (max-width:63.99rem){.contact-band::before{background:var(--scrim-strong)}}
.contact-band h2,.contact-band .h3{color:var(--text-on-dark)}
.contact-band .lede{color:var(--color-line)}
.contact-band .eyebrow{color:var(--color-brand-100)}
.contact-band__motto{color:var(--color-brand-100)}
.contact-band .btn--secondary{border-color:var(--color-line);color:var(--text-on-dark)}
.contact-band .btn--secondary:hover{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.contact-band :focus-visible{outline-color:var(--focus-ring-on-dark)}

/* Contact */
.contact{display:grid;gap:calc(var(--s)*8)}
@media (min-width:64rem){.contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.contact__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}
.contact__aside{display:flex;flex-direction:column;align-items:flex-end;text-align:right}

/* Footer — concept 02 "monogram watermark": the full lockup leads the grid and a
   second copy bleeds off the right edge at low opacity as texture. */
.site-footer--mark{position:relative;overflow:hidden;padding-block:calc(var(--s)*16) calc(var(--s)*8)}
.site-footer__watermark{position:absolute;right:calc(var(--s)*-16);bottom:calc(var(--s)*-10);width:calc(var(--s)*180);max-width:none;height:auto;opacity:.07;pointer-events:none;user-select:none}
.site-footer__grid{position:relative;align-items:start;gap:calc(var(--s)*10)}
@media (min-width:64rem){.site-footer__grid{grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,3fr)}}
.site-footer__brand a{display:inline-block;border-radius:var(--radius-sm)}
.site-footer__logo{width:calc(var(--s)*60);max-width:100%;height:auto;margin:calc(var(--s)*5) 0}
.site-footer h2{margin-bottom:calc(var(--s)*3)}
.site-footer__writing .note{color:var(--color-line);margin-bottom:calc(var(--s)*4)}
.site-footer__writing .btn{white-space:nowrap}

/* Availability line — colour is not the only signal; the words carry it */
.status{display:inline-flex;align-items:center;gap:calc(var(--s)*2);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-on-dark)}
.status__dot{width:calc(var(--s)*2);height:calc(var(--s)*2);border-radius:var(--radius);background:var(--color-brand-500);flex:none}

/* Social: icon + visible label, 44px minimum target */
.social{flex-direction:column;gap:0}
.social a{width:auto;min-width:var(--target-min);padding-inline:calc(var(--s)*2);gap:calc(var(--s)*3);font-size:var(--text-sm);text-decoration:none;border:0;justify-content:flex-start}
.social a:hover{color:var(--color-brand-100)}
.footer-link{min-width:var(--target-min)}
.footer-link:hover{color:var(--color-brand-100)}
.site-footer__legal{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(var(--s)*3);margin-top:calc(var(--s)*12);padding-top:calc(var(--s)*6);border-top:1px solid var(--color-ink-700)}
.site-footer__motto{color:var(--color-brand-100)}

/* Motion gate — carousel entrance and all transitions */
@media (prefers-reduced-motion: reduce){
  .js .slide,.js .slides.is-stacked .slide.is-current{animation:none}
}