/* Purlin & Stone (fictional example site by Loomwest): tokens, type and the signature details.
   Palette sampled from the materials: charred cedar, limewash, board-formed concrete, one Cor-ten accent. */
:root {
  --ink: #1b1d1a;
  --char: #1f211e;
  --char-2: #161815;
  --char-3: #1b1d1a;
  --smoke: #3a3d38;
  --paper: #f4f1ec;
  --mist: #e6e1d8;
  --fog: #e9e5de;
  --fog-2: #ebe7df;
  --gray-1: #4a4741; --gray-2: #5d5951; --gray-3: #8a857c; --gray-4: #b9b2a5;
  --muted: #5d5951;
  --muted-2: #5d5951;
  --line: #d8d2c7;
  --line-2: #cfc8bb;
  --flame: #9b4523;
  --flame-2: #b5552c;
  --accent: #9b4523;
  --accent-d: #7f381c;
  --f-head: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-light: "Literata", Georgia, serif;
  --f-reg: "Literata", Georgia, serif;
  --f-bold: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-narrow: "Martian Mono", ui-monospace, monospace;
  --f-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;
}
body { background: var(--paper); color: var(--ink); font-weight: 300; font-size: 19px; line-height: 34px; letter-spacing: 0; }
@media (max-width: 768px) { body { font-size: 16px; line-height: 27px; } }
.t-h1, .t-h2, .t-h3, .t-h4, .t-bg1, .t-bg2 { transform: none; letter-spacing: -.02em; }
.t-h5, .t-h6, .t-h7, .t-h8 { letter-spacing: -.005em; }
.t-h9 { font-family: var(--f-light); font-weight: 400; letter-spacing: 0; }
.t-sub2 { letter-spacing: -.01em; }
.t-ribbon { font-family: var(--f-mono); font-weight: 400; font-size: 13px; letter-spacing: .16em; }
.t-sub3 { font-family: var(--f-light); font-weight: 400; letter-spacing: 0; }
.t-sub4, .t-sub5 { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .12em; }
.t-comp1, .t-comp2 { font-family: var(--f-ui); font-weight: 600; letter-spacing: .08em; }
.t-comp3, .t-comp4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; }
.t-tab1 { font-family: var(--f-ui); font-weight: 600; letter-spacing: 0; }
.c-muted, .phead__desc, .quotes__by, .sbody__rlist { color: var(--muted); }
.svc-blk__text, .sf-text { color: var(--muted); }

/* page grounds */
.page-about-wrap, body[data-page="about"] { background: var(--paper); }
.white-ground, .statement { background: var(--paper); }
.clients, .hl-band, .more-works, .info3, .post-other { background: var(--mist); }
.prose, .case-mob { background: var(--paper); }
.page-case { background: var(--paper); }
.dhead--service { background: var(--mist); }
.btn__l::before, .btn__r::before, .btn__c { background: var(--mist); }
.btn--white .btn__c, .btn--white .btn__l::before, .btn--white .btn__r::before { background: #34372f; }
.btn--flame .btn__c, .btn--flame .btn__l::before, .btn--flame .btn__r::before { background: #7f381c; }
.reveal__in::after, .dimg::after, .carousel::after { background: var(--fog); }
.foot, .ft { background: var(--char-2); }
.uline, .menu__info a { color: var(--flame); }

/* the hero: a framed photograph where the study has its lettering, and the purlin lines */
.hero__sec { overflow: visible; }
.ps-hero-frame { position: absolute; top: calc(50% - 350px); right: -20px; width: 560px; height: 700px; overflow: hidden; border-radius: 8px;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--e1); }
.ps-hero-frame img, .ps-hero-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.75s var(--e1); }
.hero.in .ps-hero-frame, .is-mobile .ps-hero-frame { clip-path: inset(0 0 0 0); }
.hero.in .ps-hero-frame img, .hero.in .ps-hero-frame video { transform: scale(1); }
.home-loading .ps-hero-frame { clip-path: inset(0 100% 0 0); }
.purlins { position: absolute; left: 0; right: 0; height: 120px; pointer-events: none; }
.purlins i { display: block; height: 1px; margin-bottom: 23px; background: currentColor; opacity: .22; transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--e4js); }
.purlins i:nth-child(2) { transition-delay: .12s; } .purlins i:nth-child(3) { transition-delay: .24s; } .purlins i:nth-child(4) { transition-delay: .36s; } .purlins i:nth-child(5) { transition-delay: .48s; }
.purlins.in i { transform: scaleX(1); }
.hero .purlins { top: auto; bottom: 0; left: auto; right: 0; width: 46%; color: #f4f1ec; }   /* under the framed film, clear of the copy */
.hero__copy { position: relative; z-index: 2; width: 48%; }
@media (max-width: 1440px) { .hero__copy { width: 52%; } .ps-hero-frame { width: 480px; height: 620px; top: calc(50% - 310px); } }
@media (max-width: 1100px) { .ps-hero-frame { width: 38vw; } }
@media (max-width: 768px) {
  .hero { padding-bottom: 40px; }
  .hero__copy { width: 100%; }
  .ps-hero-frame { position: relative; top: auto; right: auto; width: 100%; height: 420px; margin-top: 44px; }
  .hero .purlins { display: none; }
}

/* section divider in the purlin rhythm */
.purlin-rule { position: relative; height: 120px; color: var(--ink); margin: 0 auto; }
.purlin-rule .purlins { top: 30px; }

/* dimension labels: facts set like a drawing labels a room */
.dimlabel { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.dimlabel::before, .dimlabel::after { content: ""; width: 26px; height: 9px; border-left: 1px solid currentColor; border-bottom: 1px solid transparent;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.dimlabel::after { border-left: 0; border-right: 1px solid currentColor; }
.pcard__label { background: var(--paper); padding: 6px 16px 10px; border-radius: 6px; }

/* practice overlay words on limewash */
.sf-word, .svc-blk__word { color: var(--fog-2); }
.svc-dots li::after { background: var(--ink); }

/* forms with visible labels */
.flabel { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.field-in input, .field-in textarea { font-family: var(--f-light); font-size: 17px; }
.contact__form .ffull { background: transparent; }
.contact__form .flabel { margin-top: 6px; }
.contact__form input, .contact__form textarea { background: var(--fog); border-radius: 6px; }

/* footer */
.ft { color: var(--paper); padding: 140px 0 56px; }
.ft__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.ft__brand .nhdr__logo { color: var(--paper); }
.ft__line { margin-top: 22px; max-width: 320px; color: var(--gray-4); font-size: 17px; line-height: 30px; }
.ft__title { font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-4); margin-bottom: 18px; }
.ft__col li { margin-bottom: 8px; font-family: var(--f-ui); font-size: 16px; }
.ft__col a { color: var(--paper); }
.ft__col a:hover { color: #d58a62; }
.ft__note { margin-top: 90px; padding-top: 22px; border-top: 1px solid rgba(244, 241, 236, .16); font-size: 14px; line-height: 24px; color: var(--gray-4); max-width: 900px; }
.north { display: inline-flex; align-items: center; gap: 10px; }
.north svg { flex: none; }
@media (max-width: 900px) { .ft__row { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 768px) { .ft { padding: 90px 0 40px; } .ft__note { margin-top: 50px; } }

/* numbers band (on the accent field) */
.facts { position: relative; }
.facts__in { position: relative; padding: 220px 0; }
.facts__title { margin-bottom: 80px; max-width: 780px; }
.facts__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.facts__n { font-family: var(--f-head); font-weight: 700; font-size: 72px; line-height: 80px; letter-spacing: -.03em; }
.facts__l { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; opacity: .9; }
@media (max-width: 768px) { .facts__in { padding: 120px 0; } .facts__list { grid-template-columns: 1fr 1fr; row-gap: 40px; } .facts__n { font-size: 48px; line-height: 54px; } }

.illustrative { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 28px; }
.logo-mark { color: currentColor; }

/* approach step numbers (the study's lottie icons, replaced by drawing-style numbers) */
.step-num { font-family: var(--f-mono); font-size: 64px; line-height: 150px; color: #d58a62; letter-spacing: -.02em; }
/* towns where the studio works (the study's client logo grid) */
.town { font-family: var(--f-head); font-weight: 600; font-size: 22px; line-height: 73px; text-align: center; color: var(--ink); white-space: nowrap; }
@media (max-width: 768px) { .town { font-size: 17px; line-height: 45px; } }
.towns li { max-width: 210px; }

/* readability: the quote heading no longer rides over the photograph */
.quotes__block { transform: none; }
.grow-bg__circle, .grow-bg--mist .grow-bg__circle { background: var(--mist); }

/* a picture inside an article */
.prose-fig { margin: 56px 0; }
.prose-fig .ph { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
@media (max-width: 768px) { .prose-fig { margin: 36px 0; } }

/* the consent line under every form and the privacy link in the footer (the Loomwest compliance standard, 2026-10-12) */
.fconsent { margin: 22px 0 0; max-width: 56ch; font-family: var(--f-light); font-size: 14px; line-height: 22px; letter-spacing: 0; }
.fconsent a, .ft__privacy { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* the shared photo viewer in Purlin & Stone's colours (2026-10-12): charred cedar ground, Cor-ten focus, 8 px frames */
:root { --lwlb-bg: rgba(31, 33, 30, .95); --lwlb-focus: var(--accent); --lwlb-radius: 8px; --lwlb-font: var(--f-ui); }

/* Rav's corner rule as Andre set it 2026-10-12 (about 9:45 PM: "i like how the book a free call pill looks"): every pill,
   button, tab and chip on the public site is soft-square, 8 px, never fully round. The engine's round shapes stay on the
   private study, which replicates Baunfire. */
.pill, .pills, .pills a, .nhdr__cta, .nhdr__call, .panel__pills a, .navbtn, .panel__x { border-radius: 8px; }

/* The fixed side label (Baunfire's page name on the right edge) sits over text and form fields below 1280 px, so on the
   public site it shows only where the page has room for it (checked 2026-10-12 at 390, 820, 960, 1100, 1280 and 1440). */
@media (max-width: 1279.98px) { .side-label { display: none; } }