/* ============================================================
   Quod Architects — page.css
   Shared content components for all interior pages: project
   case studies, core pages, resource articles, index pages.
   Loaded alongside site.css on every page except the homepage.
   ============================================================ */

/* ---------- Page hero (interior pages) ---------- */
.page-hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.page-hero--image{height:74vh;height:74svh;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end}
.page-hero--compact{padding:clamp(160px,24vh,260px) 0 clamp(72px,11vh,128px)}
.page-hero-media{position:absolute;inset:0;overflow:hidden}
.page-hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroZoom 18s ease-out forwards;will-change:transform}
@keyframes heroZoom{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,9,0.2) 0%,rgba(12,11,9,0.22) 35%,rgba(12,11,9,0.46) 72%,rgba(12,11,9,0.8) 100%)}
.page-hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,8vh,96px)}
.page-hero--compact .page-hero-inner{padding-bottom:0;text-align:center}
.page-hero-eyebrow{color:var(--gold);margin-bottom:clamp(20px,3vw,30px);opacity:0;animation:fadeIn 1s 0.35s var(--ease-out-expo) forwards;text-shadow:0 1px 12px rgba(12,11,9,0.4)}
.page-hero h1{color:var(--white);text-shadow:0 2px 40px rgba(12,11,9,0.5),0 1px 8px rgba(12,11,9,0.3);max-width:20ch}
.page-hero--compact h1{margin:0 auto;max-width:18ch}
.page-hero h1 em{color:var(--gold);font-weight:300;font-style:italic}
.page-hero-sub{margin-top:clamp(24px,3.5vw,36px);font-size:clamp(1.02rem,1.3vw,1.2rem);color:rgba(255,255,255,0.74);font-weight:300;line-height:1.85;max-width:54ch;opacity:0;animation:fadeIn 1s 0.55s var(--ease-out-expo) forwards}
.page-hero--compact .page-hero-sub{margin-left:auto;margin-right:auto}

/* Project meta strip in hero */
.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-top:clamp(36px,6vh,60px);padding-top:clamp(26px,4vh,38px);border-top:1px solid rgba(255,255,255,0.18);opacity:0;animation:fadeIn 1s 0.7s var(--ease-out-expo) forwards}
.hero-meta-item{display:flex;flex-direction:column;gap:6px}
.hero-meta-label{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.55);font-weight:400}
.hero-meta-value{font-family:var(--display);font-size:clamp(1rem,1.4vw,1.25rem);font-weight:400;color:var(--white)}

/* Breadcrumb */
.crumb{font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:20px;opacity:0;animation:fadeIn 1s 0.25s var(--ease-out-expo) forwards}
.crumb a{color:rgba(255,255,255,0.5);transition:color 0.3s}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 8px;opacity:0.5}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(80px,12vh,168px) 0;overflow:hidden}
.section--paper{background:var(--paper)}
.section--warm{background:var(--warm-white)}
.section--cream{background:var(--cream)}
.section--ink{background:var(--ink);color:var(--white)}
.section-head{margin-bottom:clamp(40px,6vw,72px);max-width:680px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .t-label{color:var(--accent);margin-bottom:18px}
.section--ink .section-head .t-label{color:var(--gold)}
.section-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.12;letter-spacing:-0.02em}
.section-head h2 em{color:var(--accent);font-weight:400;font-style:italic}
.section--ink .section-head h2{color:var(--white)}
.section--ink .section-head h2 em{color:var(--gold)}
.section-head p{margin-top:18px;color:var(--gray-600);font-weight:300;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.85}
.section--ink .section-head p{color:rgba(255,255,255,0.62)}

/* Lead intro block */
.intro-lead{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.45;color:var(--gray-800);letter-spacing:-0.01em}
.intro-lead em{color:var(--accent);font-weight:400;font-style:italic}
.intro-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);margin-top:clamp(28px,4vw,48px)}
.intro-body p{max-width:44ch}
@media(max-width:760px){.intro-body{grid-template-columns:1fr;gap:22px}}

/* ---------- Chapter scaffolding (project case studies) ---------- */
.chapter{padding:clamp(72px,11vh,150px) 0;background:var(--paper);overflow:hidden}
.chapter--warm{background:var(--warm-white)}
.chapter-heading{display:flex;align-items:baseline;gap:clamp(20px,3vw,40px);margin-bottom:clamp(36px,5vw,64px);max-width:1080px}
.chapter-num{font-family:var(--display);font-size:clamp(0.95rem,1.2vw,1.1rem);font-weight:400;color:var(--gold);letter-spacing:0.05em;flex-shrink:0;padding-top:0.4em;position:relative}
.chapter-num::after{content:'';display:block;width:40px;height:1px;background:var(--gold);position:absolute;top:50%;right:-52px}
.chapter-heading-inner h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px}
.chapter-heading-inner h2 em{color:var(--accent);font-weight:400;font-style:italic}
.chapter-heading-inner p{max-width:50ch;color:var(--gray-600);font-weight:300;font-size:clamp(0.98rem,1.1vw,1.08rem);line-height:1.85}
@media(max-width:680px){.chapter-num::after{display:none}.chapter-heading{flex-direction:column;gap:8px}}

/* ---------- Image layouts ---------- */
.media-full{margin:clamp(40px,6vw,80px) 0}
.media-full img{width:100%;display:block}

.media-pair{display:grid;grid-template-columns:5fr 4fr;gap:clamp(16px,2vw,28px);margin:clamp(40px,6vw,80px) 0;align-items:start}
.media-pair--reverse{grid-template-columns:4fr 5fr}
.media-pair--even{grid-template-columns:1fr 1fr}
.media-pair img{width:100%;display:block}
@media(max-width:760px){.media-pair,.media-pair--reverse,.media-pair--even{grid-template-columns:1fr;gap:16px}}

.media-trio{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(16px,2vw,28px);margin:clamp(40px,6vw,80px) 0;align-items:start}
.media-trio img{width:100%;display:block}
@media(max-width:900px){.media-trio{grid-template-columns:1fr 1fr}.media-trio>:first-child{grid-column:span 2}}
@media(max-width:560px){.media-trio{grid-template-columns:1fr}.media-trio>:first-child{grid-column:auto}}

.media-asym{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(16px,2vw,28px);margin:clamp(40px,6vw,80px) 0;align-items:end}
.media-asym img{width:100%;display:block}
@media(max-width:760px){.media-asym{grid-template-columns:1fr}}

/* Tighter 5:4 crop, for showing a second, closer read of the same frame */
.media-zoom img{aspect-ratio:5/4;object-fit:cover;object-position:center}

.media-narrow{margin:clamp(40px,6vw,80px) auto;max-width:640px;padding:0 clamp(24px,4vw,60px)}
.media-narrow img{width:100%;display:block}

.media-smart{display:grid;grid-template-columns:1fr 1.12fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,28px);margin:clamp(40px,6vw,80px) 0;align-items:start}
.media-smart-tall{grid-row:1/3;display:flex;flex-direction:column}
.media-smart-tall img{width:100%;flex:1;height:100%;object-fit:cover;min-height:0;display:block}
.media-smart>div img{width:100%;display:block}
@media(max-width:760px){
  .media-smart{grid-template-columns:1fr;grid-template-rows:none}
  .media-smart-tall{grid-row:auto;display:block}
  .media-smart-tall img{height:auto;object-fit:initial;flex:initial}
}

.media-caption{margin-top:14px;font-size:0.78rem;letter-spacing:0.06em;color:var(--gray-500);font-weight:400;line-height:1.6;max-width:52ch}
.media-caption em{color:var(--accent);font-style:normal;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;font-size:0.72rem;display:block;margin-bottom:4px}

/* Full-bleed parallax image break */
.image-break{height:clamp(380px,52vh,640px);position:relative;overflow:hidden}
.image-break img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform}
.image-break-overlay{position:absolute;inset:0;background:rgba(12,11,9,0.15)}

/* ---------- Pull quote ---------- */
.pull-quote{padding:clamp(80px,12vh,140px) 0;background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.pull-quote::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:64px;background:linear-gradient(to bottom,var(--gold),transparent)}
.pull-quote-text{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.5;color:rgba(255,255,255,0.92);letter-spacing:-0.005em;max-width:34ch;margin:0 auto;text-align:center}
.pull-quote-text::before{content:'\201C';color:var(--gold);font-style:normal;margin-right:0.12em;opacity:0.7}
.pull-quote-text::after{content:'\201D';color:var(--gold);font-style:normal;margin-left:0.12em;opacity:0.7}
.pull-quote-attr{margin-top:clamp(26px,4vw,38px);text-align:center;color:var(--gold)}

/* ---------- Material / feature strip ---------- */
.materials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) clamp(40px,6vw,80px);max-width:1080px;margin:0 auto}
.material-item{padding-top:24px;border-top:1px solid var(--gray-200)}
.section--ink .material-item{border-color:rgba(255,255,255,0.12)}
.material-item .t-label{color:var(--accent);margin-bottom:10px}
.section--ink .material-item .t-label{color:var(--gold)}
.material-item h4{font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:400;margin-bottom:10px;line-height:1.3}
.material-item p{font-size:0.96rem;color:var(--gray-600);font-weight:300;line-height:1.8}
.section--ink .material-item p{color:rgba(255,255,255,0.6)}
@media(max-width:680px){.materials-grid{grid-template-columns:1fr;gap:24px}}

/* ---------- Stat strip ---------- */
.stat-strip{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);padding-top:40px;border-top:1px solid var(--gray-200)}
.section--ink .stat-strip{border-color:rgba(255,255,255,0.14)}
.stat-number{font-family:var(--display);font-size:clamp(2.2rem,3.6vw,3.4rem);font-weight:300;color:var(--accent);line-height:1}
.section--ink .stat-number{color:var(--gold)}
.stat-label{margin-top:6px;font-size:0.76rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-400);font-weight:400}

/* ---------- Closing block ---------- */
.closing-layout{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;max-width:1240px;margin:0 auto}
.closing-img img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.closing-copy h2{margin-bottom:clamp(22px,3vw,34px)}
.closing-copy h2 em{color:var(--accent);font-weight:400;font-style:italic}
.closing-copy .t-body{margin-bottom:18px;max-width:44ch}
@media(max-width:820px){.closing-layout{grid-template-columns:1fr;gap:32px}.closing-img{order:-1}.closing-img img{aspect-ratio:4/5}}

/* ---------- Next / CTA band ---------- */
.next-cta{background:var(--ink);color:var(--white);padding:clamp(72px,11vh,120px) 0;text-align:center}
.next-cta .t-label{color:var(--gold);margin-bottom:18px}
.next-cta h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:clamp(26px,4vw,40px);color:var(--white);line-height:1.15}
.next-cta h3 em{color:var(--gold);font-weight:300;font-style:italic}
.btn-line{display:inline-flex;align-items:center;gap:14px;padding:16px 36px;border:1px solid rgba(255,255,255,0.3);color:var(--white);font-size:0.78rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;transition:background 0.4s var(--ease-out-quart),color 0.4s var(--ease-out-quart),border-color 0.4s}
.btn-line:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-line svg{width:14px;height:14px;transition:transform 0.4s var(--ease-out-quart)}
.btn-line:hover svg{transform:translateX(4px)}
.btn-line--dark{border-color:rgba(0,0,0,0.25);color:var(--ink)}
.btn-line--dark:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* ---------- Project grid (index + related) ---------- */
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px)}
.project-grid--3{grid-template-columns:repeat(3,1fr)}
.project-card{display:block;color:inherit}
.project-card-img{position:relative;overflow:hidden;aspect-ratio:4/3}
.project-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.9s var(--ease-out-expo)}
.project-card:hover .project-card-img img{transform:scale(1.05)}
.project-card-img::after{content:'View Project';position:absolute;bottom:18px;right:18px;font-size:0.68rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--white);background:rgba(12,11,9,0.72);padding:9px 18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:opacity 0.5s var(--ease-out-quart),transform 0.5s var(--ease-out-quart)}
.project-card:hover .project-card-img::after{opacity:1;transform:translateY(0)}
.project-card-info{padding:18px 0 4px}
.project-card-info .t-label{color:var(--accent);font-size:0.72rem}
.project-card-info h3{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.5rem);margin-top:7px;line-height:1.2}
.project-card-info p{margin-top:8px;font-size:0.9rem;color:var(--gray-500);font-weight:300;line-height:1.65}
@media(max-width:760px){.project-grid,.project-grid--3{grid-template-columns:1fr}}

/* Filter chips */
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(36px,5vw,56px)}
.filter-chip{font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;padding:9px 20px;border:1px solid var(--gray-200);color:var(--gray-500);background:transparent;cursor:pointer;transition:all 0.3s var(--ease-out-quart)}
.filter-chip:hover{border-color:var(--accent);color:var(--ink)}
.filter-chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- Article / prose ---------- */
.prose{max-width:720px;margin:0 auto}
.prose>*+*{margin-top:1.5em}
.prose p{font-size:clamp(1.02rem,1.15vw,1.16rem);font-weight:300;line-height:1.9;color:var(--gray-800)}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.2;letter-spacing:-0.02em;margin-top:1.8em}
.prose h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.25;margin-top:1.6em}
.prose h2 em,.prose h3 em{color:var(--accent);font-style:italic}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{font-size:clamp(1rem,1.1vw,1.12rem);font-weight:300;line-height:1.85;color:var(--gray-800);margin-top:0.6em}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);border-bottom:1px solid var(--gray-200);transition:border-color 0.3s}
.prose a:hover{border-color:var(--accent)}
.prose strong{font-weight:500;color:var(--ink)}
.prose blockquote{position:relative;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.45;color:var(--gray-800);padding:0.4em 0 0.4em 0;margin:2.2em 0;letter-spacing:-0.005em}
.prose blockquote::before{content:'\201C';position:absolute;left:-0.6em;top:-0.18em;font-family:var(--display);font-style:normal;font-size:3.4em;line-height:1;color:var(--gold);opacity:0.85;font-weight:300}
@media(max-width:680px){.prose blockquote{padding-left:0}.prose blockquote::before{position:static;display:block;margin-bottom:-0.2em;font-size:2.6em;line-height:0.6}}
.prose figure{margin:2.4em 0}
.prose figure img{width:100%;display:block}
.prose figcaption{margin-top:12px;font-size:0.78rem;letter-spacing:0.06em;color:var(--gray-500);text-align:center}
.prose-callout{position:relative;background:var(--warm-white);padding:clamp(24px,3vw,34px);margin:2.4em 0}
.prose-callout::before{content:'';position:absolute;top:0;left:0;width:36px;height:1px;background:var(--gold)}
.prose-callout p{font-size:1rem}
.prose-callout .t-label{color:var(--accent);font-size:0.74rem;margin-bottom:10px;display:block}

/* Article meta */
.article-meta{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;font-size:0.8rem;letter-spacing:0.06em;color:var(--gray-500);font-weight:400}
.article-meta .tag{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--gray-200);padding:5px 14px}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--gray-200)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:26px 44px 26px 0;position:relative;font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:400;color:var(--ink);line-height:1.4}
.faq-q::after{content:'';position:absolute;right:6px;top:50%;width:13px;height:13px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform 0.4s var(--ease-out-quart)}
.faq-item.is-open .faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease-out-quart)}
.faq-a-inner{padding:0 0 28px;font-size:1rem;font-weight:300;line-height:1.85;color:var(--gray-600);max-width:64ch}

/* ---------- Generic content card grid (services, careers, etc.) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,0.06)}
.section--ink .feature-grid{background:rgba(255,255,255,0.06)}
.feature-card{background:var(--paper);padding:clamp(34px,3.6vw,52px) clamp(26px,3vw,42px);position:relative;transition:background 0.6s}
.section--warm .feature-card{background:var(--warm-white)}
.section--ink .feature-card{background:var(--ink)}
.section--ink .feature-card:hover{background:rgba(255,255,255,0.03)}
.feature-index{font-family:var(--display);font-size:4.6rem;font-weight:300;color:rgba(0,0,0,0.05);line-height:1;position:absolute;top:22px;right:26px}
.section--ink .feature-index{color:rgba(255,255,255,0.05)}
.feature-card h3{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.8vw,1.65rem);margin-bottom:18px;line-height:1.22}
.feature-line{width:36px;height:1px;background:var(--gold);margin-bottom:18px;transition:width 0.6s var(--ease-out-expo)}
.feature-card:hover .feature-line{width:60px}
.feature-card p{font-size:0.97rem;line-height:1.82;color:var(--gray-600);font-weight:300}
.section--ink .feature-card p{color:rgba(255,255,255,0.62)}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr}}

/* Numbered process steps */
.step-list{max-width:760px}
.step{padding:clamp(34px,4.5vh,56px) 0;border-bottom:1px solid var(--gray-200);position:relative}
.step:last-child{border-bottom:none}
.step-num{font-family:var(--display);font-size:1.1rem;font-weight:400;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.step-num::after{content:'';width:24px;height:1px;background:var(--gold)}
.step h4{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:400;margin-bottom:10px}
.step p{font-size:0.98rem;color:var(--gray-500);line-height:1.85;font-weight:300}

/* ---------- Two-column copy + visual ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split--reverse .split-visual{order:-1}
.split-visual img{width:100%;display:block}
.split-visual--portrait img{aspect-ratio:3/4;object-fit:cover}
@media(max-width:880px){.split,.split--reverse{grid-template-columns:1fr;gap:36px}.split--reverse .split-visual{order:0}}

/* ---------- Contact form ---------- */
.form-field label{display:block;font-size:0.76rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gray-500);margin-bottom:10px;font-weight:400}
.form-field input,.form-field textarea,.form-field select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--gray-200);padding:12px 0;font-family:var(--body);font-size:0.95rem;font-weight:300;color:var(--ink);outline:none;transition:border-color 0.4s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--accent)}
.form-field textarea{resize:none;min-height:96px}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--gray-400)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.btn-submit{align-self:flex-start;padding:16px 48px;background:var(--ink);color:var(--white);border:none;font-family:var(--body);font-size:0.76rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;transition:background 0.4s var(--ease-out-quart)}
.btn-submit:hover{background:var(--accent)}
@media(max-width:760px){.form-row{grid-template-columns:1fr}}

/* ---------- Error pages ---------- */
.error-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--ink);color:var(--white);padding:120px clamp(24px,5vw,60px)}
.error-code{font-family:var(--display);font-weight:300;font-size:clamp(6rem,18vw,13rem);line-height:1;color:var(--gold)}
.error-page h1{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.6rem);margin-top:8px;color:var(--white)}
.error-page p{margin-top:20px;max-width:46ch;color:rgba(255,255,255,0.6);font-weight:300;line-height:1.85}
.error-actions{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---------- Q.E.D. proof mark (end of project case studies) ----------
   The studio's name comes from "Quod erat demonstrandum." This mark
   sits at the end of each case study like a mathematician's proof
   completion: a small editorial signature that rewards readers who
   know the reference. */
.qed{margin:clamp(56px,8vh,96px) auto 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:0.92rem;letter-spacing:0.34em;text-transform:uppercase;color:var(--gold);text-align:center;display:flex;align-items:center;justify-content:center;gap:18px}
.qed::before,.qed::after{content:'';width:36px;height:1px;background:var(--gold);opacity:0.55}
.section--ink .qed{color:var(--gold)}

/* ---------- Custom follow-cursor pill ----------
   A small text pill that tracks the mouse over hover-capable surfaces
   marked with data-cursor-text. Editorial gallery / luxury-brand
   mannerism. Hidden on touch and reduced-motion. */
.cursor-pill{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;background:rgba(12,11,9,0.92);color:var(--white);padding:9px 18px;border-radius:100px;font-family:var(--body);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;opacity:0;transform:translate3d(0,0,0);transition:opacity 0.32s var(--ease-out-quart),transform 0s;margin:-18px 0 0 -36px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);will-change:transform,opacity}
.cursor-pill.is-visible{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor-pill{display:none}}

/* ---------- Monoline icons (replacing emoji) ---------- */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-0.14em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;margin-right:0.42em;flex-shrink:0;color:var(--accent)}
h1 .icon,h2 .icon,h3 .icon,h4 .icon{color:var(--gold);width:0.84em;height:0.84em;margin-right:0.46em}
.section--ink .icon,.next-cta .icon,.error-page .icon,.pull-quote .icon{color:var(--gold)}
.docs-card .icon{color:var(--gold)}
.icon-fill{fill:currentColor;stroke:none}