/* Forge Studio — built in the motion-kit Fade pack (street-editorial service brand).
   A bone sheet ruled with six faint column hairlines, black ink, square corners, no shadows; huge extended capitals
   that end on a full stop, answered by a tiny book-serif eyebrow; buttons whose fill is a two-tone curtain dropping
   from the top; a header in exclusion blend that hides on scroll down; a menu where the whole page shrinks into the
   corner; a giant-link index that drops tilted photos onto a pile; ruled accordions and a three-box price list.
   Below: self-hosted fonts, fade.css verbatim (minus the Google Fonts import), the pack's layout, then this page. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../../fonts/examples/archivo-variable-wdth.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/examples/instrument-serif-400-normal.woff2") format("woff2")}

/* Fade style pack: street-editorial service brand (barbershop / grooming / studio booking).
   Bone and black, one extended grotesk in capitals, a 6-column hairline grid behind everything,
   square buttons with a two-tone curtain fill, chrome inverted with mix-blend-mode: exclusion.
   Original code that rebuilds the concept; no assets, fonts or code from the source were copied. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Instrument+Serif&display=swap');

:root {
  --bone: #f5f4f1;            /* page */
  --black: #0a090c;           /* ink, footer, menu */
  --white: #fff;              /* light buttons */
  --fill-1: #3f3f3f;          /* curtain layer 1 on dark buttons */
  --fill-2: #5a5a5a;          /* curtain layer 2 on dark buttons */
  --fill-1-l: #d8d8d8;        /* curtain layers on light buttons */
  --fill-2-l: #ececec;
  --dim: #808080;             /* hover grey on black */
  --rule: var(--black);       /* 1px rules: price boxes, accordion rows */
  --col-line: rgba(10, 9, 12, .075);  /* column hairlines on bone */
  --col-line-dark: #2c2b2c;           /* column hairlines on black */
  --veil: rgba(0, 0, 0, .42);         /* overlay under bone type on photos */

  --pad: 32px;
  --cols: 6;
  --chrome-h: 72px;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-label: 'Instrument Serif', Georgia, serif;

  --ease: ease;                                  /* hero word rise (source uses the CSS default) */
  --ease-out: cubic-bezier(.25, .46, .45, .94);  /* power1.out: hovers, stack, fades */
  --ease-in-out: cubic-bezier(.45, 0, .55, 1);   /* power1.inOut: accordion */
  --ease-shrink: cubic-bezier(.645, .045, .355, 1); /* power3.inOut: page-shrink menu */
}
@media (max-width: 991px) { :root { --pad: 24px; --cols: 4; } }
@media (max-width: 479px) { :root { --pad: 16px; --cols: 2; --chrome-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--black);
  font: 600 16px/20px var(--f-display); font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Type ---------- */
.x { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.h1 { margin: 0; font: 700 92px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; max-width: 12ch; text-wrap: balance; }
.h2 { margin: 0; font: 700 72px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.h3 { margin: 0; font: 700 24px/30px var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.h-tier { margin: 0; font: 700 32px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.label { margin: 0; font: 400 14px/30px var(--f-label); letter-spacing: 0; text-transform: none; }
.text { margin: 0; font: 600 16px/20px var(--f-display); font-stretch: 100%; max-width: 46ch; }
.micro { margin: 0; font: 600 12px/16px var(--f-display); }
.big-text { font: 700 32px/32px var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.tnum { font-variant-numeric: tabular-nums; }
@media (max-width: 991px) {
  .h1 { font-size: 56px; }
  .h2 { font-size: 48px; line-height: 54px; }
  .text { font-size: 14px; line-height: 18px; }
}
@media (max-width: 479px) {
  .h1 { font-size: 40px; }
  .h2 { font-size: 32px; line-height: 34px; }
  .h3 { font-size: 18px; line-height: 24px; }
  .big-text { font-size: 24px; line-height: 24px; }
}

/* ---------- Column hairlines (the page's ruled paper) ---------- */
.ruled { position: relative; isolation: isolate; }
.cols {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); padding: 0 var(--pad);
}
.cols i { border-right: 1px solid var(--col-line); }
.cols i:first-child { border-left: 1px solid var(--col-line); }
.cols--dark i, .cols--dark i:first-child { border-color: var(--col-line-dark); }
@media (max-width: 991px) { .cols i:nth-child(n+5) { display: none; } }
@media (max-width: 479px) { .cols i:nth-child(n+3) { display: none; } }

/* ---------- Buttons: square, caps, two-tone curtain drops from the top ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 13px 15px 9px;                 /* extended caps sit high: more top padding */
  font: 700 16px/20px var(--f-display); font-stretch: 125%; text-transform: uppercase; white-space: nowrap;
  color: var(--bone); background: var(--black); border: 1px solid var(--black); border-radius: 0;
  text-decoration: none; cursor: pointer;
}
.btn > span { position: relative; z-index: 2; }
.btn::before, .btn::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 0;
  transition: height .3s var(--ease-out);
}
.btn::before { z-index: 0; background: var(--fill-1); transition-delay: .06s; }   /* leaves last */
.btn::after  { z-index: 1; background: var(--fill-2); }
.btn:hover::before, .btn:focus-visible::before { transition-delay: 0s; height: 100%; }
.btn:hover::after,  .btn:focus-visible::after  { transition-delay: .06s; height: 100%; }  /* arrives last */
.btn--light { color: var(--black); background: var(--white); border-color: var(--white); }
.btn--outline { color: var(--black); background: var(--white); border-color: var(--black); }
.btn--light::before, .btn--outline::before { background: var(--fill-1-l); }
.btn--light::after,  .btn--outline::after  { background: var(--fill-2-l); }

/* ---------- Chrome: three thirds, inverted by exclusion, hides on scroll down ---------- */
.chrome {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--chrome-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 var(--pad);
  color: var(--bone); mix-blend-mode: exclusion;
  transition: translate .4s ease-out;
}
html.chrome-hidden .chrome { translate: 0 -100px; }
.chrome a { text-decoration: none; transition: opacity .3s; }
.chrome a:hover { opacity: .6; }
.chrome .mark { justify-self: center; font: 700 20px/1 var(--f-display); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.chrome .book { justify-self: end; font: 700 16px/20px var(--f-display); font-stretch: 125%; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 479px) { .chrome .mark { font-size: 17px; } .chrome .book { font-size: 12px; } }

.burger { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.burger i {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 3px; background: currentColor;
  translate: -50% -50%; transition: all .6s ease;
}
.burger i:nth-child(1) { top: calc(50% - 6px); }
.burger i:nth-child(3) { top: calc(50% + 6px); }
html.menu-open .burger i:nth-child(1) { top: 50%; rotate: 45deg; }
html.menu-open .burger i:nth-child(2) { width: 0; }
html.menu-open .burger i:nth-child(3) { top: 50%; rotate: -45deg; }

/* ---------- Menu: the page shrinks to the bottom-right corner, revealing it ---------- */
.menu {
  position: fixed; inset: 0; z-index: 0; background: var(--black); color: var(--bone);
  padding: calc(var(--chrome-h) + 24px) var(--pad) var(--pad);
  display: flex; flex-direction: column; justify-content: space-between;
  visibility: hidden;
}
html.menu-open .menu, html.menu-closing .menu { visibility: visible; }
.menu nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.menu nav a { font: 700 72px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; text-decoration: none; transition: color .3s; }
.menu nav a:hover, .menu nav a:focus-visible { color: var(--dim); }
.menu .micro { max-width: 50%; color: var(--dim); }
@media (max-width: 479px) { .menu nav a { font-size: 32px; } .menu .micro { max-width: none; } }

.page { position: relative; z-index: 1; background: var(--bone); transition: scale .6s var(--ease-shrink); }
html.menu-open .page { scale: .5; pointer-events: none; }
html.menu-lock, html.menu-lock body { overflow: hidden; }

/* ---------- Hero: full-bleed photo, veil, giant centred caps, one button ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: var(--pad) var(--pad) 10vh; text-align: center; color: var(--bone); background: var(--black);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg > * { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.hero > :not(.hero__bg) { position: relative; }
.hero .h1 { margin-bottom: 32px; }
.hero .label { margin-bottom: 8px; }

/* Load choreography. html.js hides; html.fonts-loaded plays (Fade.hero() sets both). */
html.js .fx-bg { opacity: 0; transform: scale(1.05); }
html.js .fx-words .w { opacity: 0; transform: translateY(30%); }
html.js .fx-btn { opacity: 0; transform: translateY(20px); }
html.fonts-loaded .fx-bg { animation: fade-bg 1.2s var(--ease-out) .15s forwards; }
html.fonts-loaded .fx-words .w { animation: word-rise .7s var(--ease) forwards; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
html.fonts-loaded .fx-btn { animation: btn-rise .6s var(--ease-out) .75s forwards; }
.w { display: inline-block; vertical-align: bottom; will-change: transform, opacity; }
@keyframes fade-bg { to { opacity: 1; transform: scale(1); } }
@keyframes word-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes btn-rise { 80% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); } }

/* Optional scroll version of the same rise for section titles (Fade.rise()). */
html.js .rise .w { opacity: 0; transform: translateY(30%); }
.rise.is-in .w { animation: word-rise .7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* ---------- Sections ---------- */
.wrap { padding: 0 var(--pad); }
.sec { padding: 96px var(--pad); }
.sec + .sec { padding-top: 0; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pad); margin-bottom: 16px; }
.head__labels { display: flex; justify-content: space-between; }
.head .btn { margin-bottom: 4px; }
.head > .label { white-space: nowrap; align-self: flex-start; }
@media (max-width: 767px) { .head { flex-direction: column; align-items: flex-start; } .sec { padding-block: 64px; } }

/* Story: image a third wide, title + button, copy on the right baseline */
.story { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.story__img { aspect-ratio: 4 / 5; overflow: hidden; }
.story__body { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.story__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pad); }
.story__row .btn { margin-top: 16px; }
@media (max-width: 767px) { .story { grid-template-columns: 1fr; } .story__row { flex-direction: column; align-items: flex-start; } }

/* Index: giant caps links left, a pile of photos right that grows as you hover */
.index { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); align-items: start; }
.index__links { display: flex; flex-direction: column; }
.index__links a { font: 700 72px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; text-decoration: none; transition: opacity .3s; }
.index__links:hover a:not(:hover), .index__links:focus-within a:not(:focus-visible) { opacity: .28; }
.stack { position: relative; height: 50vh; min-height: 320px; }
.stack > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.stack > .is-on { opacity: 1; }
@media (max-width: 991px) { .index__links a { font-size: 48px; } }
@media (max-width: 767px) { .index { grid-template-columns: 1fr; } .stack { display: none; } .index__links a { font-size: 40px; } }

/* Accordion rows: 1px rules, extended caps, chevron flips */
.acc { border-bottom: 1px solid var(--rule); }
.acc__row { border-top: 1px solid var(--rule); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 24px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.acc__icon { width: 16px; height: 16px; flex: none; transition: rotate .3s var(--ease-in-out); }
.acc__row.is-open .acc__icon { rotate: -180deg; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-in-out); }
.acc__row.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad); padding: 0 0 32px; }
@media (max-width: 767px) { .acc__grid { grid-template-columns: 1fr; gap: 12px; } }

/* Price list: three ruled boxes, tier in caps, rows name ↔ price */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); background: var(--bone); }
.tier { display: flex; flex-direction: column; gap: 8px; min-height: 360px; padding: 16px; }
.tier + .tier { border-left: 1px solid var(--rule); }
.tier dl { margin: auto 0 0; display: grid; grid-template-columns: 1fr auto; row-gap: 2px; }
.tier dt, .tier dd { margin: 0; font: 600 14px/18px var(--f-display); }
.tier dd { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .tiers { grid-template-columns: 1fr; } .tier + .tier { border-left: 0; border-top: 1px solid var(--rule); } .tier { min-height: 0; } .tier dl { margin-top: 32px; } }

/* Portfolio: edge-to-edge portrait thirds */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid3 > * { aspect-ratio: 4 / 5; overflow: hidden; }
.grid3 img, .grid3 svg { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.grid3 > a:hover img, .grid3 > a:hover svg { scale: 1.03; }
@media (max-width: 767px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 > :last-child { display: none; } }

/* Marquee: collaborator marks, 10s linear, pauses on hover */
.marquee { display: flex; gap: 1rem; overflow: hidden; padding: 2rem 0; }
.marquee__track { flex: 0 0 auto; min-width: 100%; display: flex; justify-content: space-around; gap: 1rem; animation: marquee 10s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(calc(-100% - 1rem)); } }

/* Full-bleed CTA band */
.band { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; color: var(--bone); overflow: hidden; }
.band__bg { position: absolute; inset: 0; }
.band__bg > * { width: 100%; height: 100%; object-fit: cover; }
.band__bg::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.band__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: var(--pad); }

/* ---------- Footer: black, dark hairlines, shout-out grid, giant wordmark ---------- */
.foot { background: var(--black); color: var(--bone); padding: 64px var(--pad) 32px; }
.foot__wrap { display: flex; flex-direction: column; gap: 64px; }
.shout { width: min(100%, 33.33%); min-width: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.shout__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--bone); }
.shout__grid > * { aspect-ratio: 1; overflow: hidden; filter: grayscale(1) contrast(1.08); }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad); }
.foot__cols > :last-child { grid-column: 3; }
.foot__cols .text { font-size: 12px; line-height: 16px; }
.foot__mark { width: 100%; height: auto; color: var(--bone); }
.foot__legal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad); align-items: center; }
.foot__legal > :nth-child(2) { justify-self: start; }
.foot__legal > :last-child { justify-self: end; }
.foot a { text-decoration: none; transition: opacity .3s; }
.foot a:hover { opacity: .6; }
@media (max-width: 767px) {
  .foot__cols { grid-template-columns: 1fr 1fr; } .foot__cols > :last-child { grid-column: auto; }
  .foot__legal { grid-template-columns: 1fr 1fr; row-gap: 12px; } .foot__legal > * { justify-self: start !important; }
}

/* ---------- Reduced motion: everything lands instantly; the menu becomes a plain overlay ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  html.js .fx-bg, html.js .fx-words .w, html.js .fx-btn, html.js .rise .w { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  html.menu-open .page { scale: 1; visibility: hidden; }
}

/* ───────────── Fade landing layout (from styles/fade/landing.html) ───────────── */
/* Layout for this template only. Tokens, type, chrome and components live in fade.css.
   The art is flat SVG portraiture standing in for photography: swap each <svg class="art"> for an <img class="art">. */
.art { width: 100%; height: 100%; }
.story__img .art { filter: blur(7px) contrast(1.1); transform: scale(1.06); }
.sec--tight { padding-top: 48px; }
.collab { font-size: 28px; line-height: 1; white-space: nowrap; color: var(--black); opacity: .8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icons { display: flex; gap: 14px; justify-self: start; }
.icons svg { width: 16px; height: 16px; }

/* ───────────── Forge page layer ───────────── */
:root{--rib:32px}
html.shot{--rib:0px}
html{scroll-padding-top:calc(var(--rib) + 80px)}
.chrome{top:var(--rib)}

/* the next class, counting down under the hero button */
.next{position:relative;z-index:1;margin-top:22px;color:var(--bone);text-align:center}
.next b{font:700 16px/1 var(--f-display);font-stretch:125%;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* booking: square chips with the button curtain, underline fields */
.book{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;border-top:1px solid var(--black);padding-top:32px}
.book fieldset,.book label{display:grid;gap:8px;align-content:start}
.book .chips{display:flex;flex-wrap:wrap;gap:8px}
.book .ex-chip{height:44px;padding:0 18px;border:1px solid var(--black);border-radius:0;background:transparent;font:700 14px/1 var(--f-display);font-stretch:125%;text-transform:uppercase;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .3s cubic-bezier(.25,.46,.45,.94),color .3s cubic-bezier(.25,.46,.45,.94)}
.book .ex-chip:hover{background:var(--fill-2-l)}
.book .ex-chip[aria-pressed="true"]{background:var(--black);color:var(--bone)}
.book input{width:100%;height:48px;padding:0;border:0;border-bottom:1px solid var(--black);background:transparent;font:700 22px/1 var(--f-display);font-stretch:125%;text-transform:uppercase;color:var(--black);border-radius:0}
.book input:focus{outline:0;border-bottom-width:2px}
.book input::placeholder{color:rgba(10,9,12,.3)}
.book .btn{border:0;cursor:pointer;justify-self:start}
.book .full{grid-column:1 / -1}
.book [data-note]:empty{display:none}
.book [data-note]{border-top:1px solid var(--black);padding-top:12px;max-width:46ch}
@media (max-width:767px){.book{grid-template-columns:1fr}}

/* ?shot — the 600×780 poster: the hero only, header visible */
.shot .hero{min-height:780px}