@layer reset, base, components, layout, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, ol, dl, dd { margin: 0; }
  ol { padding: 0; }
  img { display: block; max-width: 100%; }
  button, a { font: inherit; }
}

@layer base {
  :root {
    --ink: #111312;
    --ink-soft: #252825;
    --paper: #f4f4f0;
    --white: #fff;
    --grey: #a9ada8;
    --line: rgba(17, 19, 18, .18);
    --line-dark: rgba(255, 255, 255, .2);
    --worklight: #ebb96d;
    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Afacad Flux", "Segoe UI", sans-serif;
    --content: min(100% - 2rem, 90rem);
    --header-h: 4.75rem;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
  }

  body {
    min-width: 20rem;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.5;
    overflow-x: clip;
  }

  body.menu-open { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  :focus-visible { outline: 3px solid var(--worklight); outline-offset: 4px; }
  ::selection { background: var(--worklight); color: var(--ink); }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: .9;
    text-wrap: balance;
  }

  h1 { font-size: clamp(4rem, 15vw, 9rem); letter-spacing: -.045em; text-transform: uppercase; }
  h1 strong { color: var(--worklight); font-weight: inherit; }
  h2 { font-size: clamp(3.2rem, 10vw, 7.8rem); letter-spacing: -.04em; text-transform: uppercase; }
  h3 { font-size: 1.65rem; letter-spacing: -.02em; }
}

@layer components {
  .skip-link {
    position: fixed; z-index: 100; top: .75rem; left: .75rem;
    translate: 0 -160%; padding: .75rem 1rem; background: var(--white); color: var(--ink);
  }
  .skip-link:focus { translate: 0; }

  .brand { display: inline-flex; align-items: center; gap: .7rem; line-height: 1; }
  .brand__mark { display: grid; grid-template-columns: repeat(3, .25rem); gap: .18rem; width: 1.1rem; height: 1.75rem; align-items: end; }
  .brand__mark i { display: block; height: 100%; background: currentColor; }
  .brand__mark i:nth-child(2) { height: 72%; }
  .brand__mark i:nth-child(3) { height: 44%; }
  .brand__name { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
  .brand__name b { display: block; font-size: .66em; font-weight: 500; letter-spacing: .12em; }

  .button {
    min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: .8rem 1rem .8rem 1.25rem; border: 1px solid currentColor; font-weight: 600; transition: color .25s, background .25s, transform .25s var(--ease-out);
  }
  .button:hover { transform: translateY(-2px); }
  .button--light { background: var(--white); color: var(--ink); border-color: var(--white); }
  .button--light:hover { background: var(--worklight); border-color: var(--worklight); }
  .button--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .button--dark:hover { background: transparent; color: var(--ink); }
  .text-link { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 1rem; font-weight: 600; border-bottom: 1px solid currentColor; }
  .text-link--light { color: var(--white); }

  .eyebrow, .section-index {
    font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  }
  .eyebrow { display: flex; gap: 1rem; color: #d3d5d1; }
  .eyebrow span + span::before { content: "/"; margin-right: 1rem; color: var(--worklight); }
  .section-index { color: #5d625d; }
}

@layer layout {
  .site-header {
    position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; padding-inline: max(1rem, calc((100vw - 90rem) / 2));
    color: var(--white); border-bottom: 1px solid var(--line-dark); transition: background .25s, color .25s, border-color .25s;
  }
  .site-header.is-scrolled, .site-header.menu-active { background: rgba(17, 19, 18, .96); backdrop-filter: blur(12px); }

  .menu-toggle { min-width: 4.5rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: flex-end; gap: .75rem; background: none; border: 0; cursor: pointer; }
  .menu-toggle__label { font-size: .9rem; }
  .menu-toggle__icon { display: grid; gap: .32rem; width: 1.35rem; }
  .menu-toggle__icon i { height: 1px; background: currentColor; transition: transform .25s, translate .25s; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: rotate(45deg); translate: 0 .2rem; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: rotate(-45deg); translate: 0 -.2rem; }

  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto; min-height: calc(100dvh - var(--header-h));
    display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 2rem max(1rem, calc((100vw - 90rem) / 2));
    background: var(--ink); color: var(--white); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s, visibility .25s;
  }
  .primary-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
  .primary-nav a { min-height: 4rem; display: flex; align-items: center; border-bottom: 1px solid var(--line-dark); font-family: var(--display); font-size: clamp(2.5rem, 12vw, 4rem); text-transform: uppercase; }
  .primary-nav .nav-call { color: var(--worklight); }
  .primary-nav .nav-call span { margin-left: auto; font-family: var(--body); font-size: .9rem; }

  .hero { position: relative; min-height: 100svh; display: grid; background: var(--ink); color: var(--white); overflow: hidden; }
  .hero__content { position: relative; z-index: 2; width: var(--content); margin-inline: auto; padding: calc(var(--header-h) + 3.5rem) 0 3rem; }
  .hero h1 { max-width: 7ch; margin-top: 1.6rem; }
  .hero__intro { max-width: 31rem; margin-top: 1.8rem; color: #c8cbc7; font-size: clamp(1.05rem, 2vw, 1.3rem); }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2rem; }
  .hero__proof { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 32rem; margin-top: 3rem; border-top: 1px solid var(--line-dark); }
  .hero__proof p { min-width: 0; padding: 1rem .6rem 0 0; }
  .hero__proof p + p { padding-left: .75rem; border-left: 1px solid var(--line-dark); }
  .hero__proof b, .hero__proof span { display: block; }
  .hero__proof b { font-family: var(--display); font-size: 1.8rem; line-height: 1; }
  .hero__proof span { margin-top: .25rem; color: #aeb1ad; font-size: .78rem; line-height: 1.2; }

  .room-switcher { position: relative; min-height: 34rem; display: flex; gap: 2px; background: var(--ink); overflow: hidden; }
  .room-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex .7s var(--ease-out); }
  .room-panel.is-active { flex: 2.5 1 0; }
  .room-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 19, 18, .08), rgba(17, 19, 18, .65)); pointer-events: none; }
  .room-panel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04); transition: filter .5s, scale .8s var(--ease-out); }
  .room-panel.is-active img { filter: saturate(.92) contrast(1); scale: 1.025; }
  .room-panel button { position: absolute; z-index: 2; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
  .room-panel__number, .room-panel__title { position: absolute; left: .8rem; }
  .room-panel__number { top: 1rem; font-family: var(--display); font-size: .75rem; letter-spacing: .1em; }
  .room-panel__title { bottom: 1rem; font-family: var(--display); font-size: clamp(1.4rem, 5vw, 2.6rem); font-weight: 700; text-transform: uppercase; writing-mode: vertical-rl; rotate: 180deg; }
  .room-panel.is-active .room-panel__title { writing-mode: initial; rotate: 0deg; }
  .room-switcher__caption { position: absolute; z-index: 4; right: 0; bottom: 0; width: min(25rem, 86%); padding: 1.2rem; background: var(--worklight); color: var(--ink); }
  .room-switcher__caption span { font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .room-switcher__caption p { margin-top: .35rem; line-height: 1.25; }
  .hero__scroll { display: none; }

  .section { width: var(--content); margin-inline: auto; padding-block: clamp(5.5rem, 11vw, 10rem); }
  .section-heading { display: grid; gap: 1.5rem; }
  .section-heading h2 { max-width: 10.5ch; }
  .section-heading > p:last-child { max-width: 35rem; font-size: clamp(1.1rem, 2vw, 1.35rem); color: #4f544f; }

  .work-grid { display: grid; gap: .8rem; margin-top: 3.5rem; }
  .project { position: relative; min-width: 0; overflow: hidden; background: #ddd; }
  .project img { width: 100%; height: 100%; min-height: 31rem; object-fit: cover; transition: scale .75s var(--ease-out), filter .4s; }
  .project:hover img { scale: 1.025; }
  .project figcaption { position: absolute; inset: auto 0 0; padding: 3.5rem 1rem 1rem; background: linear-gradient(transparent, rgba(17, 19, 18, .82)); color: var(--white); }
  .project figcaption span, .project figcaption b { display: block; }
  .project figcaption span { font-size: .8rem; color: #d9dbd8; }
  .project figcaption b { margin-top: .15rem; font-family: var(--display); font-size: 1.55rem; line-height: 1; text-transform: uppercase; }
  .instagram-link { min-height: 5.5rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem; margin-top: .8rem; padding: 1rem; border: 1px solid var(--line); transition: background .25s, color .25s; }
  .instagram-link span:first-child { color: #636863; }
  .instagram-link b { grid-column: 1; font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2.3rem); line-height: 1; }
  .instagram-link span:last-child { grid-row: 1 / span 2; grid-column: 2; font-size: 1.5rem; }
  .instagram-link:hover { background: var(--ink); color: var(--white); }

  .approach { border-top: 1px solid var(--line); }
  .approach__lead h2 { max-width: 9ch; margin-top: 1.5rem; }
  .approach__body { margin-top: 3rem; }
  .approach__statement { max-width: 35rem; font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.25; }
  .process-list { margin-top: 3rem; list-style: none; border-top: 1px solid var(--line); }
  .process-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
  .process-list > li > span { font-family: var(--display); color: #696e69; }
  .process-list h3 { text-transform: uppercase; }
  .process-list p { max-width: 29rem; margin-top: .5rem; color: #555a55; }
  .approach .button { margin-top: 2rem; }

  .showroom { display: grid; background: var(--ink); color: var(--white); }
  .showroom__image { min-height: 35rem; overflow: hidden; }
  .showroom__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
  .showroom__content { padding: clamp(4rem, 10vw, 8rem) max(1rem, calc((100vw - 90rem) / 2)); }
  .showroom .section-index { color: var(--worklight); }
  .showroom h2 { max-width: 8ch; margin-top: 1.5rem; }
  .showroom address { display: grid; margin-top: 2.5rem; color: #d5d7d4; font-style: normal; font-size: 1.1rem; }
  .showroom__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
  .hours { max-width: 34rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
  .hours h3 { margin-bottom: 1rem; text-transform: uppercase; }
  .hours dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid rgba(255,255,255,.1); }
  .hours dd { color: var(--worklight); }
  .hours p { margin-top: 1rem; color: #9fa39f; font-size: .85rem; }

  .final-cta { position: relative; min-height: 38rem; display: grid; place-content: center; justify-items: center; padding: 5rem 1rem; text-align: center; overflow: hidden; }
  .final-cta::before { content: ""; position: absolute; width: min(86vw, 52rem); aspect-ratio: 1; border: 1px solid rgba(17,19,18,.14); border-radius: 50%; }
  .final-cta::after { content: ""; position: absolute; width: min(60vw, 34rem); aspect-ratio: 1; border: 1px solid rgba(17,19,18,.08); border-radius: 50%; }
  .final-cta > * { position: relative; z-index: 1; }
  .final-cta h2 { max-width: 8ch; margin-top: 1rem; }
  .call-orbit { width: min(18rem, 76vw); aspect-ratio: 1; display: grid; place-content: center; margin-top: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--white); transition: background .25s, scale .3s var(--ease-out); }
  .call-orbit:hover { background: #2b302c; scale: 1.025; }
  .call-orbit span, .call-orbit b { display: block; }
  .call-orbit span { color: #afb3ae; }
  .call-orbit b { font-family: var(--display); font-size: 1.8rem; }
  .call-orbit i { margin-top: .5rem; color: var(--worklight); font-style: normal; }

  .site-footer { display: grid; gap: 1.5rem; padding: 2rem max(1rem, calc((100vw - 90rem) / 2)) 6rem; background: var(--ink); color: var(--white); }
  .site-footer > p { color: #aeb2ad; }
  .footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  .footer-links a, .footer-credit a { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .25rem; }
  .footer-credit { padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .88rem; }
  .footer-credit a { display: inline; color: var(--white); }

  .mobile-call { position: fixed; z-index: 45; inset: auto .6rem .6rem; min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--worklight); color: var(--ink); box-shadow: 0 .5rem 2rem rgba(0,0,0,.25); }
  .mobile-call span { font-size: .82rem; }
  .mobile-call b { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; }

  html:not(.js) .site-header { position: absolute; height: auto; flex-wrap: wrap; padding-top: .75rem; background: var(--ink); }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .primary-nav {
    position: static; min-height: auto; flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 1.25rem; overflow-x: auto; padding: .65rem 0 .4rem; background: transparent; visibility: visible; opacity: 1; pointer-events: auto;
  }
  html:not(.js) .primary-nav a { flex: 0 0 auto; min-height: 2.75rem; border: 0; font-family: var(--body); font-size: .88rem; text-transform: none; }
  html:not(.js) .primary-nav .nav-call { color: var(--worklight); }
  html:not(.js) .primary-nav .nav-call span { display: none; }
  html:not(.js) .hero__content { padding-top: 10rem; }
}

@layer utilities {
  @media (min-width: 48rem) {
    :root { --content: min(100% - 4rem, 90rem); }
    .site-header { padding-inline: 2rem; }
    .work-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 37rem 30rem; }
    .project img { min-height: 0; }
    .project--tall { grid-row: 1 / span 2; }
    .project--wide, .project--detail { grid-column: 2; }
    .section-heading { grid-template-columns: 9rem 1fr; }
    .section-heading > p:last-child { grid-column: 2; }
    .approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); gap: 5rem; }
    .approach__body { margin-top: 0; padding-top: 3rem; }
    .showroom { grid-template-columns: minmax(0, 1.1fr) minmax(26rem, .9fr); min-height: 52rem; }
    .showroom__image { min-height: 100%; }
    .showroom__content { padding-inline: clamp(3rem, 6vw, 8rem); }
    .site-footer { grid-template-columns: 1fr 1fr; padding-inline: 2rem; }
    .footer-links { justify-content: flex-end; }
    .footer-credit { grid-column: 1 / -1; }
  }

  @media (min-width: 80rem) {
    :root { --header-h: 5.25rem; }
    .site-header { padding-inline: max(2rem, calc((100vw - 90rem) / 2)); }
    .menu-toggle { display: none; }
    .primary-nav { position: static; inset: auto; min-height: auto; flex-direction: row; align-items: center; gap: 2.2rem; padding: 0; background: none; visibility: visible; opacity: 1; pointer-events: auto; }
    .primary-nav a { min-height: 2.75rem; border: 0; font-family: var(--body); font-size: .92rem; text-transform: none; }
    .primary-nav a:not(.nav-call)::after { content: ""; align-self: flex-end; width: 0; height: 1px; margin: 0 0 .45rem .35rem; background: currentColor; transition: width .25s; }
    .primary-nav a:hover::after { width: 1.25rem; }
    .primary-nav .nav-call { padding: .35rem .4rem .35rem 1rem; border: 1px solid var(--line-dark); }
    .primary-nav .nav-call span { margin-left: .75rem; padding: .45rem .65rem; background: var(--worklight); color: var(--ink); }

    .hero { grid-template-columns: minmax(32rem, .88fr) minmax(36rem, 1.12fr); }
    .hero__content { width: auto; margin: 0; padding: calc(var(--header-h) + clamp(3rem, 7vh, 6rem)) 3rem 5rem max(2rem, calc((100vw - 90rem) / 2)); align-self: center; }
    .hero h1 { font-size: clamp(5.5rem, 7vw, 8.5rem); }
    .room-switcher { min-height: 100svh; }
    .room-panel__number, .room-panel__title { left: 1rem; }
    .room-switcher__caption { right: 1.5rem; bottom: 1.5rem; }
    .hero__scroll { position: absolute; z-index: 5; left: max(2rem, calc((100vw - 90rem) / 2)); bottom: 1.25rem; display: flex; align-items: center; gap: 1rem; font-size: .78rem; }
    .hero__scroll i { width: 3rem; height: 1px; background: var(--worklight); }
    .work-grid { grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: 42rem; }
    .project--tall, .project--wide, .project--detail { grid-column: auto; grid-row: auto; }
    .instagram-link { grid-template-columns: 1fr auto auto; padding-inline: 1.5rem; }
    .instagram-link b { grid-column: 2; grid-row: 1; }
    .instagram-link span:last-child { grid-column: 3; grid-row: 1; }
    .site-footer { padding-inline: max(2rem, calc((100vw - 90rem) / 2)); padding-bottom: 2.5rem; }
    .mobile-call { display: none; }
  }

  @media (min-width: 100rem) {
    .hero { grid-template-columns: minmax(40rem, .95fr) minmax(55rem, 1.05fr); }
    .hero__content { padding-left: max(4rem, calc((100vw - 110rem) / 2)); }
    .site-header { padding-inline: max(4rem, calc((100vw - 110rem) / 2)); }
    .hero__scroll { left: max(4rem, calc((100vw - 110rem) / 2)); }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }

  .motion-reduced { scroll-behavior: auto; }
  .motion-reduced *, .motion-reduced *::before, .motion-reduced *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}