/* Craft & Cork — shared web system (proposal v0.1)
   Layout concept: six-column editorial grid on warm ivory, 8px rhythm, wide margins,
   geometry borrowed from the tapered-pint mark. One burgundy moment per view. */
:root{
  --ivory:#F5F1E8; --ivory-2:#EEE8DC; --white:#FFFFFF; --charcoal:#20201F;
  --stone:#D8D0C5; --burgundy:#78172B; --burgundy-ink:#5F1122;
  --ink:#20201F; --ink-2:#56514B; --ink-3:#7A736B; --rule:#D8D0C5;
  --on-dark:#F5F1E8; --on-dark-2:#B9B2A8; --dark-rule:#3A3936;
  --sans:"Avenir Next","Avenir","Inter","Helvetica Neue",Arial,sans-serif;
  --u:8px; --max:1320px; --gut:clamp(16px,4.2vw,64px);
  --fs-cap:12px; --fs-sm:14px; --fs-body:17px; --fs-lead:20px; --fs-h4:22px; --fs-h3:clamp(24px,2.4vw,32px);
  --fs-h2:clamp(32px,4vw,52px); --fs-h1:clamp(40px,6.2vw,84px);
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
h1,h2,h3,h4{font-weight:600;line-height:1.08;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:-.022em;line-height:1.02}
h2{font-size:var(--fs-h2);letter-spacing:-.018em}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);line-height:1.25}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(var(--u)*3)}
.label{font-size:var(--fs-cap);font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.label .sl{color:var(--burgundy);margin-inline:.5em}
.muted{color:var(--ink-2)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:38ch}
.measure{max-width:62ch}
.burg{color:var(--burgundy)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* ---------- family bar + header ---------- */
.familybar{background:var(--charcoal);color:var(--on-dark-2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.familybar .wrap{display:flex;align-items:center;gap:calc(var(--u)*3);height:36px;overflow-x:auto;scrollbar-width:none}
.familybar .wrap::-webkit-scrollbar{display:none}
.familybar a{text-decoration:none;white-space:nowrap;padding-block:4px;color:var(--on-dark-2);transition:color .2s}
.familybar a:hover{color:var(--on-dark)}
.familybar a[aria-current]{color:var(--on-dark)}
.familybar a[aria-current]::before{content:"";display:inline-block;width:6px;height:6px;background:var(--burgundy);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}
.familybar .fb-note{margin-left:auto;color:#8b857c;letter-spacing:.08em;white-space:nowrap}
.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--ivory) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.site.scrolled{border-bottom-color:var(--rule)}
.site .wrap{display:flex;align-items:center;gap:calc(var(--u)*4);height:72px}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0}
.lockup svg{width:20px;height:30px;color:var(--ink)}
.lockup .wm{font-weight:600;letter-spacing:.18em;font-size:14px;text-transform:uppercase;white-space:nowrap}
.lockup .wm .ext{color:var(--burgundy)}
.site nav{display:flex;gap:calc(var(--u)*3.5);margin-left:auto;align-items:center}
.site nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);position:relative;padding-block:6px;transition:color .2s}
.site nav a:hover,.site nav a[aria-current]{color:var(--ink)}
.site nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--burgundy)}
.site .cta{margin-left:calc(var(--u)*1)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);height:40px;padding:0 14px;font:inherit;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--burgundy);width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:920px){
  .site nav,.site .cta{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .site.open nav{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ivory);border-bottom:1px solid var(--rule);padding:8px var(--gut) 20px}
  .site.open nav a{padding-block:14px;border-bottom:1px solid var(--rule);font-size:18px}
  .site.open nav a[aria-current]::after{display:none}
  .site.open nav .btn{margin-top:16px;justify-content:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;background:var(--burgundy);color:var(--white);text-decoration:none;font:inherit;font-size:15px;font-weight:600;letter-spacing:.02em;border:1px solid var(--burgundy);border-radius:2px;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease),color .25s,border-color .25s;white-space:nowrap}
.btn:hover{background:var(--burgundy-ink);border-color:var(--burgundy-ink)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn--light{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn--light:hover{background:var(--white);border-color:var(--white)}
.btn--ghost-light{background:transparent;color:var(--on-dark);border-color:rgba(245,241,232,.5)}
.btn--ghost-light:hover{background:var(--on-dark);color:var(--charcoal)}
.btn--sm{height:38px;padding:0 14px;font-size:14px}
.textlink{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.textlink:hover{color:var(--burgundy)}
.textlink .arr{display:inline-block;transition:transform .3s var(--ease)}
.textlink:hover .arr{transform:translateX(3px)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,9vw,136px)}
.sec--tight{padding-block:clamp(48px,6vw,88px)}
.sec--dark{background:var(--charcoal);color:var(--on-dark)}
.sec--dark .muted,.sec--dark .lead{color:var(--on-dark-2)}
.sec--burg{background:var(--burgundy);color:var(--white)}
.sec--burg .muted,.sec--burg .lead{color:#E8CBD1}
.sec--white{background:var(--white)}
.sec-head{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .label{grid-column:1/-1}
.sec-head h2{grid-column:1/5}
.sec-head .lead{grid-column:5/7;justify-self:end}
@media (max-width:860px){.sec-head h2,.sec-head .lead{grid-column:1/-1;justify-self:start}}

/* pint-geometry frame for imagery (derived from the mark's silhouette) */
.pint{clip-path:polygon(9% 0,91% 0,96% 22%,84.6% 100%,15.4% 100%,4% 22%);}
.frame{position:relative;overflow:hidden;background:var(--ivory-2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.03)}
.caption{font-size:13px;color:var(--ink-3);margin-top:10px;letter-spacing:.01em}

/* reveal on scroll — resting state is visible; JS adds motion only */
.js .rv{opacity:.25;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.08s}.js .rv-d2{transition-delay:.16s}.js .rv-d3{transition-delay:.24s}

/* crown tokens */
.crown{--crown-fg:var(--white);--crown-bg:var(--burgundy)}
.crown--ink{--crown-fg:var(--burgundy);--crown-bg:var(--white)}
.crown-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy);white-space:nowrap}
.crown-tag svg{width:26px;height:16px}
.listing-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* chips */
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--rule);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.chip .ct{font-size:12px;color:var(--ink-3)}
.chip[aria-pressed="true"] .ct{color:var(--on-dark-2)}

/* forms */
.field{display:grid;gap:6px}
.field label,.field .flabel{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;height:48px;padding:0 14px;border:1px solid var(--stone);background:var(--white);color:var(--ink);font:inherit;font-size:16px;border-radius:2px;transition:border-color .2s}
textarea.input{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.input:focus{outline:none;border-color:var(--ink)}
.sec--dark .input{background:#2A2A28;border-color:var(--dark-rule);color:var(--on-dark)}

/* footer */
.foot{background:var(--charcoal);color:var(--on-dark);padding-block:clamp(64px,8vw,112px) 32px}
.foot .line{font-size:clamp(28px,4.4vw,60px);font-weight:600;letter-spacing:-.02em;line-height:1.05;max-width:16ch}
.foot .line span{color:#C98C99}
.foot .cols{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px;margin-top:clamp(48px,6vw,88px);padding-top:32px;border-top:1px solid var(--dark-rule)}
.foot h5{margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;color:var(--on-dark);font-size:15px;opacity:.85;transition:opacity .2s}
.foot a:hover{opacity:1}
.foot .legal{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;margin-top:56px;font-size:13px;color:#8b857c}
.foot .fmark{display:flex;align-items:center;gap:12px}
.foot .fmark svg{width:22px;height:33px;color:var(--on-dark)}
@media (max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}}

/* proposal notes */
.notes-toggle{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--ink);background:var(--ivory);color:var(--ink);font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 24px rgba(32,32,31,.12)}
.notes-toggle[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.notes-toggle i{width:8px;height:8px;border-radius:50%;background:var(--burgundy);display:inline-block}
[data-note]{position:relative}
.show-notes [data-note]{outline:1px dashed rgba(120,23,43,.55);outline-offset:6px}
.note-pin{display:none}
.show-notes .note-pin{display:block;position:absolute;top:-14px;right:-6px;z-index:30;max-width:300px;background:#FFF8D6;color:#3a3420;border:1px solid #E5D892;padding:10px 12px;font-size:13px;line-height:1.45;font-weight:500;letter-spacing:0;text-transform:none;box-shadow:0 6px 18px rgba(0,0,0,.1);text-align:left}
.show-notes .note-pin b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px;color:#7a6a1f}
@media (max-width:700px){.show-notes .note-pin{position:relative;top:auto;right:auto;margin-top:10px;max-width:none}}

/* utility layouts */
.split{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:center}
.split>.a{grid-column:1/4;min-width:0}.split>.b{grid-column:4/7;min-width:0}
@media (max-width:860px){.split>.a,.split>.b{grid-column:1/-1}}
.stack-sm>*+*{margin-top:12px}.stack>*+*{margin-top:24px}.stack-lg>*+*{margin-top:40px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}
@media (max-width:920px){.site.open nav .cta-in-menu{display:inline-flex!important;margin-top:16px;justify-content:center;color:var(--white)}}
@media (max-width:700px){.notes-toggle{left:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:32px;padding:0 10px;font-size:12px}}
@media (max-width:520px){.lockup .wm{letter-spacing:.1em;font-size:12.5px}.lockup{gap:8px}.lockup svg{width:16px;height:24px}.familybar .fb-note{display:none}.site .wrap{gap:12px}.menu-btn{padding:0 10px}}
[hidden]{display:none!important}

/* ---------- vector brand compositions (resolution-independent stand-ins for photography) ---------- */
.comp{position:relative;overflow:hidden;container-type:inline-size;width:100%;height:100%;min-height:260px}
.comp svg{display:block}
.comp-book{background:var(--stone);display:grid;place-items:center}
.comp-book::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.35),transparent 60%)}
.comp-book .bk{position:relative;width:52cqw;aspect-ratio:3/4;background:var(--ivory);box-shadow:3cqw 4cqw 6cqw -2cqw rgba(32,32,31,.35),inset -1px 0 0 rgba(0,0,0,.06);display:grid;place-items:center;transform:rotate(-4deg)}
.comp-book .bk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:13%;background:var(--burgundy)}
.comp-book .bk .in{display:grid;justify-items:center;gap:2.4cqw;padding-left:13%}
.comp-book .bk svg{width:7cqw;height:auto;color:var(--charcoal)}
.comp-book .bk b{font-weight:600;letter-spacing:.22em;font-size:2.6cqw;text-transform:uppercase;text-align:center;line-height:1.4}
.comp-book .bk small{display:block;color:var(--burgundy);letter-spacing:.3em}
.comp-banner{background:var(--charcoal);display:grid;place-items:center}
.comp-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 0%,rgba(245,241,232,.12),transparent 70%)}
.comp-banner .rig{position:absolute;top:0;height:18%;width:.5cqw;background:#55534F}
.comp-banner .rig.l{left:24%}.comp-banner .rig.r{right:24%}
.comp-banner .bn{position:relative;margin-top:6%;width:66cqw;background:var(--burgundy);color:#fff;padding:6cqw 5cqw 5cqw;display:grid;grid-template-columns:auto 1fr;gap:4cqw;align-items:center;box-shadow:0 4cqw 8cqw -3cqw rgba(0,0,0,.6)}
.comp-banner .bn svg{width:9cqw;height:auto;color:#fff}
.comp-banner .bn b{font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:3.6cqw;line-height:1.35}
.comp-banner .bn b small{display:block;font-size:.72em;letter-spacing:.42em;font-weight:500}
.comp-banner .bn p{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.35);padding-top:3cqw;font-size:2.6cqw;color:#F3DDE2;display:flex;justify-content:space-between;gap:2cqw}
.comp-decal{background:linear-gradient(160deg,#2B2A28,#1A1A19);display:grid;place-items:center}
.comp-decal::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}
.comp-decal .dc{position:relative;width:54cqw;aspect-ratio:1;background:var(--burgundy);border-radius:5cqw;display:grid;align-content:center;justify-items:center;gap:2.6cqw;padding:6cqw;box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.5)}
.comp-decal .dc svg{width:100%;height:auto}
.comp-decal .dc b{color:#fff;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:3.4cqw;text-align:center;line-height:1.5}
.comp-decal .dc small{display:block;font-size:.62em;letter-spacing:.3em;font-weight:500;color:#F0D9DE}
.comp-card{background:var(--stone);display:grid;place-items:center}
.comp-card .env{position:absolute;width:62cqw;aspect-ratio:16/10;background:var(--burgundy);transform:rotate(7deg) translate(6cqw,5cqw);box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.3)}
.comp-card .cd{position:relative;width:58cqw;aspect-ratio:16/10;background:var(--ivory);transform:rotate(-3deg);box-shadow:0 3cqw 6cqw -2cqw rgba(32,32,31,.35);display:grid;place-items:center}
.comp-card .cd .in{display:flex;align-items:center;gap:3cqw}
.comp-card .cd svg{width:5.5cqw;height:auto;color:var(--charcoal)}
.comp-card .cd b{font-weight:600;letter-spacing:.24em;font-size:3cqw;text-transform:uppercase}