/* Alpine Punk • canonical reading system, components, and responsive contracts.
   Artwork and paper surfaces remain in full-website.css. */
:root {
  --paper:var(--color-paper); --white:var(--color-ivory); --ink:var(--color-ink);
  --pine:var(--color-pine); --acid:var(--color-acid); --muted:var(--color-muted);
  --gutter:clamp(2rem,5vw,5rem); --container:80rem;
}
html { overflow-x:visible; scroll-padding-top:2rem; }
body { overflow-x:visible; font:400 var(--type-body)/1.75 var(--font-body); }
[hidden] { display:none!important; }
main { display:block; }
main:focus { outline:none; }
p { overflow-wrap:break-word; }
a,button,input,textarea,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible,
.journal-link:focus-visible,.contact-field input:focus-visible,.contact-field textarea:focus-visible {
  outline:3px solid var(--pine); outline-offset:5px;
  box-shadow:0 0 0 5px var(--white);
}
.type-body { max-width:65ch; overflow-wrap:anywhere; }
.type-intro { max-width:48ch; }
.type-meta { text-transform:uppercase; }
/* Shared editorial rhythm. */
.about,.process,.augmented,.progress-section { padding-block:var(--space-24); }
.about-paper,.process-paper { min-height:0; }
.about-title,.aug-title,.process-title,.progress-heading,#contact .contact-heading h2 {
  margin:var(--space-4) 0 var(--space-6)!important;
  max-width:100%;
}
.process-title { line-height:1.05!important; }
.section-label { gap:var(--space-3); margin:0; }
.about-copy p { margin:0; max-width:65ch; }
.about-copy p+p { margin-top:var(--space-4); }
.hero-positioning,.aug-intro,.work-intro { color:var(--white); }
.aug-intro { margin:0; max-width:48ch; }
.aug-intro p { margin:0; }
.process-head { padding:0; border:0; margin:0 0 var(--space-12); }
.process-head p { margin:0; }
.work-heading { margin-bottom:var(--space-16); max-width:48rem; }
.work-intro { max-width:48ch; }
.services-note { margin:var(--space-8) 0 var(--space-12); }
.handwritten,.research-photo:after { font:500 var(--type-hand)/1.2142857 var(--font-hand); }
.contact-note { color:var(--color-error); }
/* Header and hero. */
.site-header { padding-block:var(--space-6); }
.header-inner { gap:var(--space-6); padding-bottom:var(--space-6); }
.desktop-nav { gap:var(--space-4); }
.desktop-nav a,.btn,.journal-link {
  font:500 var(--type-control)/1.5384615 var(--font-mono); letter-spacing:.06em;
}
.desktop-nav a { display:inline-flex; align-items:center; min-height:2.75rem; padding:0 var(--space-2); }
.desktop-nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.desktop-nav a[href="#contact"] {
  position:relative; isolation:isolate; justify-content:center; min-height:2.75rem;
  height:auto; border:0; padding:0 19px; color:var(--ink); text-decoration:none;
}
.desktop-nav a[href="#contact"]::before {
  content:''; position:absolute; inset:-22px -10px; z-index:-1;
  background:var(--acid); transform:rotate(-2deg); transition:transform var(--duration-ui);
  -webkit-mask:url('assets/contact-spray-generated.png') center/100% 100% no-repeat;
  mask:url('assets/contact-spray-generated.png') center/100% 100% no-repeat;
}
.desktop-nav a[href="#contact"]:hover::before { transform:rotate(0) scale(1.04); }
.desktop-nav a[href="#contact"]:focus-visible { outline-offset:10px; }
/* The fallback core remains invisible beneath loaded paint, and readable if it fails. */
.desktop-nav a[href="#contact"]::after {
  content:''; position:absolute; inset:8px 5px; z-index:-2; background:var(--acid);
}
.hero { min-height:48rem; height:100svh; max-height:none; }
.hero-content { grid-template-columns:1fr; padding-top:15rem; padding-bottom:5rem; }
.hero-copy { min-width:0; }
.hero-title { max-width:100%; }
.hero-title span { display:block; margin-top:.08em; font-size:.85em; line-height:1; }
.hero-title br { display:none; }
.hero-positioning { margin-top:var(--space-6); max-width:48ch; }
.hero-kicker { margin:var(--space-6) 0 0; }
.coordinates { top:10rem; line-height:1.5; }
.hero .hero-media::before {
  background:linear-gradient(90deg,rgb(21 37 34 / .76),rgb(21 37 34 / .68));
}
.augmented-media,.progress-media {
  background-image:linear-gradient(90deg,rgb(21 37 34 / .76),rgb(21 37 34 / .68)),var(--scene-image);
}
.augmented-media { --scene-image:url('assets/alpine-sky-solarpunk.jpg'); }
.progress-media { --scene-image:url('assets/alpine-sky-stage3.jpg'); }
/* Services: pictures can tilt; paragraphs stay upright. */
#services .cap-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-12) var(--space-8); }
#services .cap-card { display:flex; flex-direction:column; }
#services .cap-img h3 { font:600 var(--type-service-caption)/1.125 var(--font-hand); min-height:5rem; padding:var(--space-3) var(--space-2) var(--space-4); }
#services .cap-body,#services .cap-card:nth-child(even) .cap-body { transform:none; padding:3rem 2rem 2rem; flex:1; }
#services .cap-body p { margin:0; }
/* Process: grow vertically before reducing reading size. */
#process .process-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-8); border:0; }
#process .process-step { display:flex; flex-direction:column; border:0; border-top:1px dashed var(--color-boundary); padding:var(--space-6) 0 0; min-width:0; }
.process-number { font:500 var(--type-meta)/1.5 var(--font-mono); letter-spacing:.08em; color:var(--color-error); }
#process .process-step h3 { margin:0 0 var(--space-4); min-height:0; }
#process .process-step p { margin:0; min-height:0; }
#process .diagram { height:10rem; width:100%; margin-top:auto; padding-top:var(--space-6); }
/* Project cards: the paper may shift; content does not. */
.work-grid { gap:var(--space-8); }
.work-card,.work-card:nth-child(even) { transform:none; padding:var(--space-8); }
.work-card::before { transform:rotate(-.35deg); }
.work-card:nth-child(even)::before { transform:rotate(.35deg); }
.work-card-head { min-height:0; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); gap:var(--space-6); }
.work-card h3 br { display:none; }
.work-reference { margin:0 0 var(--space-6); }
.work-category { margin-top:var(--space-8); }
.work-category,.work-facts dt { font:500 var(--type-meta)/1.5 var(--font-mono); letter-spacing:.08em; }
.work-facts { max-width:none; margin:var(--space-8) 0 var(--space-6); }
.work-facts>div+div { margin-top:var(--space-6); }
.work-facts>div:last-child { padding-right:0; }
.work-facts dt { margin-bottom:var(--space-2); }
.work-facts dd { margin:0; }
.work-specimen,.work-annotation { display:none; }
.journal-link { min-height:2.75rem; width:100%; justify-content:space-between; gap:var(--space-4); padding:var(--space-2) 0; }
/* Contact. */
.contact { padding-block:var(--space-24) var(--space-8); }
#contact .contact-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--space-8) var(--space-12); }
#contact .contact-heading h2 br { display:none; }
#contact .contact-copy { max-width:48ch; }
.contact-title-accent { text-decoration-color:var(--color-rust); }
.contact-start { margin-top:var(--space-4); }
.contact-form { padding:var(--space-8); box-shadow:var(--shadow-paper); }
.contact-form-heading { margin-bottom:var(--space-6); }
.contact-form-section { color:var(--color-error); margin-bottom:var(--space-2); }
.contact-project-title { margin:var(--space-8) 0 var(--space-4); }
.contact-form-heading p { font:400 var(--type-support)/1.5714286 var(--font-body); color:var(--muted); }
.contact-form-fields { gap:var(--space-6); }
.contact-field>label { font:500 var(--type-body)/1.5 var(--font-body); margin-bottom:var(--space-2); }
.contact-field label>span:not(.contact-optional) { color:var(--color-error); }
.contact-optional { font:400 var(--type-support)/1.5714286 var(--font-body); margin-left:var(--space-1); }
.contact-field input,.contact-field textarea {
  font:400 var(--type-body)/1.5 var(--font-body); min-height:3rem; padding:var(--space-3);
  background:var(--color-field); border:1px solid var(--color-boundary); color:var(--ink);
}
.contact-field textarea { min-height:9rem; }
.contact-field textarea::placeholder,.contact-field input::placeholder { font:inherit; color:var(--muted); opacity:1; }
.contact-field input[aria-invalid="true"],.contact-field textarea[aria-invalid="true"] { border:2px solid var(--color-error); }
.field-error { color:var(--color-error); margin:var(--space-2) 0 0; }
.contact-additional { margin-top:0; }
.contact-form-footer { margin-top:var(--space-6); }
#contact .contact-submit { font:500 var(--type-control)/1.5384615 var(--font-mono); min-height:2.75rem; padding:var(--space-3) var(--space-6); }
.contact-submit[aria-busy="true"] { cursor:wait; }
.contact-form-status { font:400 var(--type-support)/1.5714286 var(--font-body); margin:var(--space-4) 0 0; }
.form-error-summary { border:2px solid var(--color-error); padding:var(--space-4); margin-bottom:var(--space-6); background:var(--color-field); }
.form-error-summary p { margin:0; font-weight:600; }
.form-error-summary ul { padding-left:var(--space-6); margin:var(--space-2) 0 0; }
.form-error-summary a { display:inline-block; min-height:2.75rem; padding-block:8px; text-decoration:underline; }
.footer { margin-top:var(--space-16); gap:var(--space-8); padding-top:var(--space-8); }
.footer-meta { font:500 var(--type-meta)/1.5 var(--font-mono); letter-spacing:.08em; gap:var(--space-2); }
/* Keep decoration within the canvas without hiding overflowing reading text. */
.research-collage { max-width:100%; }
.bot-palm { right:0; }
.bot-leaf { left:0; }
.contact-sketch,.contact-margin-sketch,.footer-margin-sketch { display:none; }
.mobile-nav { overflow:auto; overscroll-behavior:contain; }
.mobile-nav a { display:inline-block; min-height:44px; max-width:100%; padding-block:var(--space-2); font:600 clamp(2rem,7vw,3.5rem)/1.15 var(--font-display); }
.nav-close { min-width:44px; min-height:44px; }
@media(max-width:1199px) {
  #services .cap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #process .process-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid { grid-template-columns:1fr; max-width:48rem; margin-inline:auto; gap:var(--space-16); }
}
@media(max-width:1000px) {
  .desktop-nav { gap:var(--space-2); }
  .brand img { width:190px; }
  #contact .contact-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
  #contact .contact-content { grid-column:1; grid-row:1; }
  #contact .contact-form { grid-column:1; grid-row:2; }
  #contact .contact-photo { grid-column:1; grid-row:3; }
}
@media(max-width:900px) {
  :root { --gutter:1.5rem; }
  .hero-content { padding-top:14rem; }
  .hero-positioning { max-width:48ch; }
  .about-grid { gap:var(--space-12); }
}
@media(max-width:760px) {
  .about,.process,.augmented,.progress-section { padding-block:var(--space-16); }
  .contact { padding-top:var(--space-16); }
  .hero { height:auto; min-height:100svh; position:relative; }
  .hero-content { min-height:100svh; padding-top:15rem; padding-bottom:5rem; }
  .hero-title { font-size:var(--type-hero); }
  .coordinates { top:9rem; left:0; right:auto; text-align:left; }
  .work-heading { margin-bottom:var(--space-16); }
  .work-card-head { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .research-collage { width:min(100%,450px); }
}
@media(max-width:699px) {
  #services .cap-grid { grid-template-columns:1fr; gap:var(--space-12); max-width:32rem; margin-inline:auto; }
  #process .process-list { grid-template-columns:1fr; gap:var(--space-8); }
  #process .process-step { display:flex; }
  #process .diagram { margin-top:var(--space-6); height:10rem; padding-top:0; }
  .draw-svg { max-width:16rem; }
  .contact-form-fields { grid-template-columns:1fr; }
  .contact-form { padding:var(--space-6); }
}
@media(max-width:480px) {
  .work-card,.work-card:nth-child(even) { padding:var(--space-6); }
  .work-card-head { grid-template-columns:1fr; }
  .work-diagram { width:min(100%,15rem); margin:var(--space-6) auto 0; }
  .work-facts { max-width:100%; }
  .hero-kicker { max-width:100%; }
  .hero-title span { white-space:normal; }
  .footer { align-items:flex-start; }
}
@media(max-width:359px) {
  :root { --gutter:1rem; }
  .header-inner { gap:var(--space-3); }
  .brand img { width:165px; }
  #services .cap-body { padding-inline:var(--space-6); }
}
@media(prefers-reduced-motion:reduce) {
  .hero-atmosphere { display:none; }
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
@media(forced-colors:active) {
  .desktop-nav a[href="#contact"] { background:ButtonFace; color:ButtonText; border:1px solid ButtonText; }
  .desktop-nav a[href="#contact"]::before,.desktop-nav a[href="#contact"]::after { display:none; }
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid Highlight!important; }
  .contact-field input,.contact-field textarea { border:1px solid ButtonText; }
}
@media print {
  html,body,.hero,.paper-surface,.contact,.work-card::before { background:white!important; color:black!important; }
  .hero { position:relative; height:auto; min-height:0; }
  .hero-content { min-height:0; padding:2rem 0; }
  .hero-media,.hero-grid,.coordinates,.site-header,.mobile-nav,.hero-atmosphere,.augmented-media,.progress-media,.aug-grid,.contact-photo,.research-collage { display:none!important; }
  .about,.process,.augmented,.progress-section,.contact { padding-block:2rem; min-height:0; }
  .type-intro,.hero-kicker,.section-label { color:black!important; }
  .paper-surface,.contact { clip-path:none; }
  .process-list,.cap-grid,.work-grid,.contact-grid { display:block!important; }
  .process-step,.cap-card,.work-card,.contact-form { break-inside:avoid; margin-bottom:2rem; }
  .cap-body,.contact-form { box-shadow:none; }
}

.confirmation-page { min-height:100svh; background:var(--paper); color:var(--ink); padding:clamp(1.5rem,5vw,5rem); }
.confirmation-brand img { width:220px; height:auto; }
.confirmation-content { max-width:48rem; margin:var(--space-24) auto; }
.confirmation-content h1 { margin:var(--space-4) 0 var(--space-6); }
.confirmation-content .btn { margin-top:var(--space-8); }
/* Bound only the decorative collage, never the reading columns. */
.research-collage { width:min(100%,30rem); max-width:100%; justify-self:center; overflow:clip; }
.research-photo:after,.contact-photo:after { font:500 1.25rem/1.2 var(--font-hand); }

h1,h2,h3 { overflow-wrap:anywhere; }
.desktop-nav { min-width:0; flex-wrap:wrap; justify-content:flex-end; }
.brand { flex-shrink:0; }
.form-error-summary:focus,.contact-form-status:focus { outline:3px solid var(--pine); outline-offset:5px; box-shadow:0 0 0 5px var(--white); }

.work-facts dt,.type-meta { overflow-wrap:anywhere; }
/* About and Contact share the approved reduced journal-photo dimensions. */
:root { --journal-photo-size:clamp(300px,26vw,360px); }
#about .research-collage {
  min-width:0;
  min-height:calc(var(--journal-photo-size) + 192px);
  overflow:visible;
}
#about .research-photo,#contact .contact-photo {
  width:calc(var(--journal-photo-size) * .9);
  min-width:270px;
  max-width:none;
}
#about .bot-leaf { width:48%; left:0; bottom:0; transform:rotate(-20deg); }
#about .bot-palm { width:48%; right:0; top:0; transform:rotate(17deg); }
#about .research-photo {
  left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-5deg);
}
/* Inset the rotated botanicals without clipping the larger photo mount. */
@media(max-width:600px) {
  #about .bot-leaf { left:24px; }
  #about .bot-palm { right:24px; }
}
/* Keep the image and paper border inside narrow phone viewports. */
@media(max-width:379px) {
  #about .research-photo,#contact .contact-photo {
    border-left-width:8px;
    border-right-width:8px;
  }
  #about .research-photo { transform:translate(-50%,-50%); }
  #contact .contact-photo { transform:none; }
}

/* Card previews retain their typography; the section heading uses the shared display role. */
.progress-section { --font-body:'Cabin',Arial,sans-serif; }
.journal-placeholder { --font-display:'Roboto Slab',Georgia,serif; }
.journal-link { display:flex; align-items:center; color:var(--ink); text-decoration:none; cursor:default; }
.journal-link[aria-disabled="true"] { opacity:1; }
.journal-link>span[aria-hidden] { font-size:1.5rem; line-height:1; }

/* Keep the hanging paper visible while unpublished content stays obscured. */
.journal-link-label { text-decoration:underline; text-underline-offset:.3em; }
.journal-placeholder { opacity:.45; filter:blur(4px); user-select:none; }
.journal-overlay { position:absolute; z-index:3; inset:0; display:grid; place-items:center; padding:var(--space-6); background:rgb(233 227 212 / .3); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
/* Raised clips grip the translucent paper; the stamp sits below them. */
.work-clip { z-index:4; }
.journal-stamp { display:block; width:min(65%,11.25rem); max-width:100%; height:auto; margin:0; }
@media print { .journal-placeholder { visibility:hidden; } .journal-overlay { background:none; } }