/* Built by website/tools/build-site.mjs from the Barkas concept (D-076). Edit the concept, then rebuild. */
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/InstrumentSans-Variable.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:block;unicode-range:U+0000-2191,U+2193-FFFF}
/* Layout: the hero is a full red sheet that folds on each tap into each of Case 01's forms, one line of the brand
   on each. The page below opens to scrolling once the last form is reached, and then scrolls as usual. The
   studio speaks only in small pills at the edges, with its wordmark fixed at the foot. */
:root{
  --paper:#f2efe8;
  --paper-deep:#e7e2d8;
  --reverse:#ebe3d5;
  --ink:#151512;
  --red:#ed4129;
  --red-type:#d83520;
  --muted:#66645f;
  --line:#cbc7be;
  --shade:rgba(58,27,11,.30);
  --font:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,.78,.2);
  --corner:30px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{background:var(--paper)}
body{margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.off{visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Chrome: pills, label, wordmark, progress ---------- */
.chrome{position:fixed;left:0;right:0;z-index:20;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.chrome-top{top:0;grid-template-columns:minmax(0,1fr) auto;align-items:start;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.chrome-bottom{bottom:0;align-items:end;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.chrome a,.chrome button{pointer-events:auto}
.chrome>*{position:relative}
.chrome::before{content:"";position:absolute;left:0;right:0;pointer-events:none;opacity:0;transition:opacity .35s}
.chrome-top::before{top:0;height:calc(62px + env(safe-area-inset-top,0px));background:linear-gradient(var(--paper) 58%,rgba(242,239,232,0))}
.chrome-bottom::before{bottom:0;height:calc(100px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--paper) 48%,rgba(242,239,232,0))}
/* A page's fades show once its sheet has reached them (fade-low, fade-high), in ink on the Studio page's dark sheet
   (dark-low, dark-high). While that page's giant wordmark is in view, the small one and the lower fade step aside. */
body.fade-low .chrome-bottom::before,body.fade-high .chrome-top::before{opacity:1}
body.retone .tone,body.retone .tone .pill{transition:none}   /* a sheet's edge passing under the chrome switches it at once */
body.dark-high .chrome-top::before{background:linear-gradient(var(--ink) 58%,rgba(21,21,18,0))}
body.dark-low .chrome-bottom::before{background:linear-gradient(to top,var(--ink) 48%,rgba(21,21,18,0))}
body.mark-off .chrome-bottom::before{opacity:0}
.nav{display:flex;flex-wrap:wrap;gap:5px}
.chrome-top .end{justify-self:end;display:flex;gap:5px}
.pill{display:inline-flex;align-items:center;gap:.55em;min-height:26px;padding:6px 9px 5px;font:600 11.5px/1.15 var(--font);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:inherit;background:var(--pill,rgba(21,21,18,.07));border-radius:2px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .25s,color .25s}
.pill:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
/* Each piece of chrome takes the colour of what lies under it: ivory on the red sheet, ink on paper. */
.tone{--fg:var(--ink);--pill:rgba(21,21,18,.07);color:var(--fg);transition:color .25s,background-color .25s}
.tone[data-tone="dark"]{--fg:var(--paper);--pill:rgba(242,239,232,.17)}
a.pill:hover,button.pill:hover,.pill[aria-current="page"]{background:var(--red);color:var(--paper)}
.tone[data-tone="dark"] a.pill:hover,.pill.tone[data-tone="dark"]:hover{background:var(--paper);color:var(--ink)}
.pill .bar{width:1px;height:.95em;background:currentColor;opacity:.55}
.pill .dim{opacity:.72}
.pill-close[hidden]{display:none}
.swap{display:inline-grid;overflow:hidden;vertical-align:top}
.swap>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.55em;white-space:nowrap}
.label{grid-column:1;grid-row:1;justify-self:start}
.counter{grid-column:3;grid-row:1;justify-self:end;font:600 11.5px/1 var(--font);letter-spacing:.07em;font-variant-numeric:tabular-nums;padding-bottom:6px}
.wordmark{grid-column:2;grid-row:1;font:700 clamp(30px,3.15vw,46px)/1 var(--font);letter-spacing:-.064em;padding-right:.05em;text-decoration:none;white-space:nowrap}
.wordmark.tone{transition:color .25s,background-color .25s,opacity .3s}
body.mark-off .wordmark{opacity:0;pointer-events:none}
/* Where an edge between ivory and red crosses the wordmark, the wordmark is cut exactly along it. */
.wordmark.wipe{color:transparent;background:linear-gradient(var(--above) 0 var(--cut),var(--below) var(--cut) 100%);-webkit-background-clip:text;background-clip:text;transition:none}
.progress{position:fixed;left:0;bottom:0;z-index:21;width:100%;height:2px;background:var(--bar,var(--red));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
body.paged .label,body.paged .counter,body.paged .progress{visibility:hidden}

/* ---------- The page: full-height screens that scroll as usual ---------- */
.scroller{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.scroller::-webkit-scrollbar{display:none}
/* The hero holds the page until the visitor has folded through every form and back to the hero. */
.scroller.locked{overflow-y:hidden}
.screen{position:relative;height:100%;overflow:hidden;display:grid;place-items:center}
.m{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .16em;margin:-.08em -.03em -.16em}
.w{display:inline-block;will-change:transform}

/* The hero: one sheet. A panel in the middle and a door on each side, folded along two creases.
   Each click closes the doors over the line, turns the sheet if the next form runs the other way, and opens it. */
.hero{background:var(--paper);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.toy{position:absolute;left:0;top:0;width:100%;height:100%;perspective:1600px;color:var(--paper);outline:none}
.toy:focus-visible{outline:2px solid currentColor;outline-offset:-10px}
.toy>*{position:absolute}
.toy-cast{inset:0;box-shadow:16px 22px 48px rgba(70,20,4,.22),4px 6px 14px rgba(70,20,4,.12);opacity:0}
.panel,.face{background:var(--red);overflow:hidden}
.flap{transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{background:var(--reverse)}
.shade{position:absolute;inset:0;background:#2a0f03;opacity:0;pointer-events:none}
.face.back .shade{background:#5a3a22}
[data-axis="v"] .panel{left:25%;width:50%;top:0;height:100%}
[data-axis="v"] .flap-a{left:0;width:25%;top:0;height:100%;transform-origin:100% 50%}
[data-axis="v"] .flap-b{left:75%;width:25%;top:0;height:100%;transform-origin:0 50%}
[data-axis="v"] .back{transform:rotateY(180deg)}
[data-axis="v"] .flap-a .front{box-shadow:inset -1px 0 rgba(60,12,0,.13)}
[data-axis="v"] .flap-b .front{box-shadow:inset 1px 0 rgba(60,12,0,.13)}
[data-axis="h"] .panel{top:25%;height:50%;left:0;width:100%}
[data-axis="h"] .flap-a{top:0;height:25%;left:0;width:100%;transform-origin:50% 100%}
[data-axis="h"] .flap-b{top:75%;height:25%;left:0;width:100%;transform-origin:50% 0}
[data-axis="h"] .back{transform:rotateX(180deg)}
[data-axis="h"] .flap-a .front{box-shadow:inset 0 -1px rgba(60,12,0,.13)}
[data-axis="h"] .flap-b .front{box-shadow:inset 0 1px rgba(60,12,0,.13)}
/* The folded-under corner. On a sheet that runs wide it is the lower-right corner, on the right-hand door.
   A quarter turn anticlockwise carries it to the upper right, so on a sheet that runs tall it is there, on the top door. */
[data-axis="v"] .flap-b .front{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corner)),calc(100% - var(--corner)) 100%,0 100%)}
[data-axis="v"] .flap-b .back{clip-path:polygon(0 0,100% 0,100% 100%,var(--corner) 100%,0 calc(100% - var(--corner)))}
[data-axis="h"] .flap-a .front{clip-path:polygon(0 0,calc(100% - var(--corner)) 0,100% var(--corner),100% 100%,0 100%)}
[data-axis="h"] .flap-a .back{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corner)),calc(100% - var(--corner)) 100%,0 100%)}
[data-axis="v"] .flap-b .front::after,[data-axis="h"] .flap-a .front::after{content:"";position:absolute;right:0;width:var(--corner);height:var(--corner)}
[data-axis="v"] .flap-b .front::after{bottom:0;background:linear-gradient(135deg,rgba(255,196,170,0) calc(50% - 7px),rgba(255,196,170,.30) 50%)}
[data-axis="h"] .flap-a .front::after{top:0;background:linear-gradient(45deg,rgba(255,196,170,0) calc(50% - 7px),rgba(255,196,170,.30) 50%)}
.corner-shade{right:0;bottom:0;width:var(--corner);height:var(--corner);pointer-events:none;
  background:linear-gradient(135deg,transparent 50%,var(--shade) 50%,rgba(58,27,11,.08) 62%,rgba(58,27,11,0) 76%)}
[data-axis="h"] .corner-shade{top:0;bottom:auto;background:linear-gradient(45deg,transparent 50%,rgba(58,27,11,.16) 50%,rgba(58,27,11,0) 70%)}
/* What is printed on the sheet: the line on the panel, the form's labels on the doors. */
.say{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
[data-axis="v"] .say{padding:calc(var(--corner) + 4px) 6%}
[data-axis="h"] .say{padding:8px calc(var(--corner) + 4px)}
.hero-line{font:600 clamp(22px,2.4vw,36px)/1.2 var(--font);letter-spacing:-.03em;text-wrap:balance;color:var(--paper)}
.hero-line .l2{display:block;color:var(--ink)}
.explain{font:650 var(--say,52px)/1.02 var(--font);letter-spacing:-.047em;text-wrap:balance;color:var(--paper)}
.labels{position:absolute;inset:0;padding:13px 15px;color:rgba(242,239,232,.94);font:600 11px/1.15 var(--font);letter-spacing:.07em;text-transform:uppercase;pointer-events:none}
.l-col{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.l-col.l-right{align-items:flex-end}
.l-row{display:flex;justify-content:space-between;gap:10px}
.l-row.l-bottom{height:100%;align-items:flex-end}
.labels.on-panel{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:10px 11px;font-size:10px}
[data-axis="h"] #labelsA{padding-right:calc(var(--corner) + 6px)}
.booting .hero-line .w{transform:translate3d(0,112%,0)}
/* "Tap to fold" appears only when someone tries to scroll while the hero holds the page: a little under the hero's
   line, or under the form's sheet once folding has begun (over it where a short screen leaves no room under).
   The words hold still and fade in; beside them a touch circle taps until they fade away after a moment. A tap that
   folds the sheet clears them at once. Under reduced motion the circle holds still. */
.hint{position:absolute;left:0;right:0;z-index:2;margin:0;text-align:center;
  font:600 11px/1.2 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .25s var(--ease-in)}
.hint.on{opacity:1;transition:opacity .2s var(--ease-out)}
/* The words stay centred under the line; a touch circle taps to their left, like a touchscreen's tap: a soft disc
   presses down and lifts away, leaving a ring that spreads and fades. Ivory on the red sheet, ink on the paper. */
.hint-words{position:relative;display:inline-block;margin-right:-.09em}
.touch{position:absolute;right:100%;top:50%;width:1em;height:1em;margin:-.5em 1.1em 0 0;--touch:var(--ink)}
.hint.on-red .touch{--touch:var(--paper)}
.touch i{position:absolute;inset:0;border-radius:50%;opacity:0}
.touch .dot{background:var(--touch)}
.touch .ring{border:1.5px solid var(--touch)}
.hint.on .dot{animation:touch-dot 1.2s var(--ease-out) .2s infinite}
.hint.on .ring{animation:touch-ring 1.2s var(--ease-out) .2s infinite}
@keyframes touch-dot{0%{transform:scale(.6);opacity:0}12%{transform:none;opacity:.5}24%{transform:scale(.84);opacity:.6}46%,100%{transform:none;opacity:0}}
@keyframes touch-ring{0%,22%{transform:scale(.9);opacity:0}26%{opacity:.55}64%,100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.hint.on .dot,.hint.on .ring{animation:none}.hint.on .dot{opacity:.5}}
/* "Scroll", once the page opens: a small, quiet label with a touchscreen swipe to its left, the tap circle's sibling.
   The same disc presses, slides up a faint track and lifts off while still moving, as a finger does (Ryan, 2026-11-11). */
.swipe{position:absolute;right:100%;top:50%;width:1em;height:2.3em;margin:-1.15em 1.1em 0 0;--touch:var(--ink)}
.hint.on-red .swipe{--touch:var(--paper)}
.swipe::before{content:"";position:absolute;left:50%;top:.5em;bottom:.5em;width:1px;margin-left:-.5px;background:var(--touch);opacity:.28}
.swipe i{position:absolute;left:0;bottom:0;width:1em;height:1em;border-radius:50%;background:var(--touch);opacity:0}
.hint.on .swipe i{animation:swipe 1.2s var(--ease-out) .15s infinite}
@keyframes swipe{0%{transform:translateY(0) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}14%{transform:translateY(0) scale(1);opacity:.6;animation-timing-function:cubic-bezier(.5,0,.3,1)}58%{transform:translateY(-1.25em) scale(1);opacity:.55;animation-timing-function:cubic-bezier(.3,0,.6,1)}74%,100%{transform:translateY(-1.55em) scale(.85);opacity:0}}
@media (prefers-reduced-motion:reduce){.hint.on .swipe i{animation:none;opacity:.55}}

/* Contact: the brief, then the address. */
.s-contact{background:var(--paper)}
/* ---------- Contact: the paper screen folds up into the brief (Ryan, 2026-11-11) ----------
   The screen is one sheet, paper on the front and red on the back, lying on a darker paper table. "Let's fold" folds
   it the hero's way into the brief: three questions on the red side, the letter on the paper side, then the studio's
   note on the red, the letter folded shut. */
.s-contact{box-sizing:border-box;padding:56px 0 76px;background:var(--paper-deep)}
.intro-sheet{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--paper)}
.intro{display:grid;justify-items:center;gap:clamp(22px,4.5vh,40px);padding:0 16px}
.anchor{margin:0;font:650 clamp(34px,4.4vw,60px)/1.02 var(--font);letter-spacing:-.047em;text-align:center;text-wrap:balance}
.intro-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:600 13px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:var(--red);border:0;border-radius:2px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:background-color .2s,color .2s}
.intro-go:hover{background:var(--ink);color:var(--paper)}
.intro-go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#contact[data-state="card"] #introSheet,#contact[data-state="fold"] #introSheet,#contact[data-state="intro"] #contactCard,#contact[data-entering] #contactCard{visibility:hidden}
/* While the sheet folds, the fold draws it; the line under the card stays. */
#contact[data-state="fold"] #brief,#contact[data-state="fold"] #briefWrap>.brief-ear{visibility:hidden}
#contact[data-state="fold"] #briefWrap::before{opacity:0}
.contact{position:relative;z-index:3;width:100%;box-sizing:border-box;display:grid;justify-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* The card has one size, set from the screen (--cw, --ch); the note is the card folded shut, half of it. */
.brief-wrap{--ear:38px;position:relative;isolation:isolate;width:var(--cw,780px)}
.brief-wrap::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:16px 22px 48px rgba(70,20,4,.22),4px 6px 14px rgba(70,20,4,.12)}
.brief{display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);height:var(--ch,470px);box-sizing:border-box;margin:0;overflow:hidden;
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.4vw,26px) clamp(16px,2.2vw,24px);background:var(--red);color:var(--ink);
  clip-path:polygon(0 0,calc(100% - var(--ear)) 0,100% var(--ear),100% 100%,0 100%)}
.brief [hidden],.brief-alt [hidden]{display:none!important}
.brief-ear{position:absolute;top:0;right:0;width:var(--ear);height:var(--ear);pointer-events:none;background:linear-gradient(to top right,var(--paper-deep) 50%,transparent 50%)}
.brief-top{display:flex;justify-content:space-between;gap:12px;padding-right:calc(var(--ear) - 4px);font:600 11.5px/1.15 var(--font);letter-spacing:.07em;text-transform:uppercase}
.brief-step{display:flex;flex-direction:column;gap:clamp(12px,2vh,18px)}
.brief-q{display:block;margin:0;max-width:12em;font:650 clamp(26px,4.2vw,54px)/1.02 var(--font);letter-spacing:-.047em;color:var(--paper);outline:none}
.brief-input{width:100%;box-sizing:border-box;margin:0;padding:4px 0 10px;font:500 clamp(18px,2vw,26px)/1.2 var(--font);letter-spacing:-.02em;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(21,21,18,.5);border-radius:0}
.brief-input::placeholder{color:rgba(21,21,18,.62);opacity:1}
.brief-input:focus{outline:none;border-bottom-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:600 12.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(242,239,232,.24);border:0;border-radius:2px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);transition:background-color .2s,color .2s}
.chip:hover{background:rgba(242,239,232,.42)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.brief-note{margin:0;font-size:13px;font-weight:500}
.brief-foot{margin-top:auto;display:flex;align-items:center;gap:12px}
.brief-foot .grow{flex-grow:1}
.brief-link{min-height:44px;padding:0 4px;font:600 12.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:inherit;background:transparent;border:0;cursor:pointer}
.brief-enter{font-size:12.5px;font-weight:500}
.brief-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;font:600 13px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--paper);background:var(--ink);border:0;border-radius:2px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.brief-btn:disabled{opacity:.45;cursor:default}
.brief :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* The questions, the letter and the note take focus only so a screen reader announces them: no ring. */
.brief .brief-q:focus-visible,.brief .letter-body:focus-visible,.brief .sent-head:focus-visible,.brief .brief-input:focus-visible{outline:none}
/* The letter is on the paper side. Turned over, the folded corner lies behind it: its corner is cut on the other
   side (left after a turn about the upright, bottom after a turn about the level), with no flap to see. */
.brief[data-step="4"]{background:var(--paper)}
.brief-wrap[data-ax="v"] .brief[data-step="4"]{clip-path:polygon(var(--ear) 0,100% 0,100% 100%,0 100%,0 var(--ear))}
.brief-wrap[data-ax="h"] .brief[data-step="4"]{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ear)),calc(100% - var(--ear)) 100%,0 100%)}
.brief-wrap[data-step="4"] .brief-ear,.brief-wrap[data-step="5"] .brief-ear{display:none}
.brief-letter{flex-grow:1;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,22px)}
.letter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.brief-wrap[data-ax="v"] .letter-head{padding-left:calc(var(--ear) - 4px)}
.brief-wrap[data-ax="h"] .brief-letter .brief-small{padding-right:var(--ear)}
.letter-mark{font:700 24px/1 var(--font);letter-spacing:-.064em;color:var(--ink)}
.letter-body{margin:0;max-width:21em;font:600 clamp(18px,2.7vw,34px)/1.22 var(--font);letter-spacing:-.03em;text-wrap:pretty;outline:none}
.letter-body .ans{color:var(--red-type)}
.letter-actions{display:flex;align-items:center;gap:14px}
.brief-small{margin:0;font-size:13px;color:var(--muted)}
/* Signed with their name and email: the brief is sent from the page, and we reply to them. */
/* One signature line on a wide card (name, email, Send); on a narrow one, Send drops below. */
.letter-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.letter-sign{flex:1 1 320px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.sig{display:block;min-width:0}
.sig-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sig-input{width:100%;box-sizing:border-box;margin:0;padding:6px 0 8px;font:500 16px/1.2 var(--font);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0}
.sig-input::placeholder{color:var(--muted);opacity:1}
.sig-input:focus{outline:none;border-bottom-color:var(--ink)}
.brief .sig-input:focus-visible{outline:none}
.sig-input[aria-invalid="true"]{border-bottom-color:var(--red-type)}
.brief-btn[aria-busy="true"]{opacity:.6;cursor:progress}
/* The note: the red side of the letter folded shut, half the card, the same centre. */
.brief-wrap[data-ax="v"][data-step="5"]{width:calc(var(--cw,780px) / 2)}
.brief-wrap[data-ax="h"] .brief[data-step="5"]{height:calc(var(--ch,470px) / 2)}
.brief[data-step="5"]{clip-path:none;padding:clamp(16px,2.4vw,28px)}
.brief-sent{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(8px,1.6vh,14px)}
.sent-status{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 10px 6px;font:600 11.5px/1.15 var(--font);letter-spacing:.07em;text-transform:uppercase;background:rgba(242,239,232,.24);border-radius:2px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.sent-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.25}}
.sent-head{margin:0;font:650 clamp(28px,3.6vw,46px)/1.02 var(--font);letter-spacing:-.047em;color:var(--paper);outline:none}
.sent-body{margin:0;max-width:22em;font:500 clamp(15px,1.4vw,18px)/1.4 var(--font)}
/* Under the card, not part of it. */
.brief-alt{position:absolute;left:0;right:0;top:100%;margin-top:14px;text-align:center;font-size:13px;line-height:1.45;color:var(--muted)}
.brief-alt p{margin:0;text-wrap:balance}
.brief-alt a{color:var(--ink);font-weight:600}
.brief-alt .brief-link{min-height:32px;margin-left:4px;font-size:12px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.sent-dot{animation:none}}
/* The fold: drawn only while the contact sheet moves. The hero's panel and two doors, each with both faces printed
   with its slice of what lies on that side; the real screen takes over on the last frame. */
.cf{position:absolute;z-index:4;perspective:1600px;pointer-events:none}
.cf-cast{position:absolute;inset:0;box-shadow:16px 22px 48px rgba(70,20,4,.22),4px 6px 14px rgba(70,20,4,.12);opacity:0}
.cf-sheet{position:absolute;inset:0;transform-style:preserve-3d}
.cf-part{position:absolute;transform-style:preserve-3d}
.cf[data-ax="v"] .cf-panel{left:25%;width:50%;top:0;height:100%}
.cf[data-ax="v"] .cf-a{left:0;width:25%;top:0;height:100%;transform-origin:100% 50%}
.cf[data-ax="v"] .cf-b{left:75%;width:25%;top:0;height:100%;transform-origin:0 50%}
.cf[data-ax="h"] .cf-panel{top:25%;height:50%;left:0;width:100%}
.cf[data-ax="h"] .cf-a{top:0;height:25%;left:0;width:100%;transform-origin:50% 100%}
.cf[data-ax="h"] .cf-b{top:75%;height:25%;left:0;width:100%;transform-origin:50% 0}
.cf-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf[data-ax="v"] .cf-far{transform:rotateY(180deg)}
.cf[data-ax="h"] .cf-far{transform:rotateX(180deg)}
.cf-shade{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:#2a0f03}
.cf-face[data-side="p"] .cf-shade{background:#5a3a22}
.cf-print{position:absolute!important;margin:0!important;visibility:visible!important;transform:none!important}
.cf-print.brief-wrap::before{display:none}
/* Short screens, a landscape phone: the same sheet, tighter. */
@media (max-height:540px){
  .s-contact{padding:50px 0 62px}
  .brief{gap:8px;padding:12px 16px}
  .brief-step,.brief-letter,.brief-sent{gap:8px}
  .brief-q{font-size:24px}
  .brief-input{font-size:17px;padding:2px 0 6px}
  .chip{min-height:36px;padding:0 11px;font-size:11.5px}
  .brief-btn,.brief-link{min-height:38px}
  .brief-enter{display:none}
  .letter-head{padding-bottom:8px}
  .letter-body{font-size:19px}
  .sent-head{font-size:26px}
  .brief-alt{margin-top:8px;font-size:12px}
  .anchor{font-size:30px}
  .intro{gap:18px}
}
.email{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:500}
.pill-solid{--pill:rgba(21,21,18,.07);color:var(--ink)}

/* ---------- Pages: a sheet laid over the work ---------- */
.page{position:fixed;inset:0;z-index:10;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);transform:translateY(100%);transition:transform .7s var(--ease-out);box-shadow:0 -24px 60px rgba(21,21,18,.10)}
.page.open{transform:none}
.page.closing{transition:transform .45s var(--ease-in)}
/* The Work page says it is coming: nothing to show until Case 01 is made (Ryan, 2026-11-11). A paper sheet with the
   Studio page's title at the top and its large type at the foot. */
.wk{box-sizing:border-box;min-height:100%;max-width:1472px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:64px;
  padding:calc(54px + clamp(56px,8vw,112px) + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(124px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.wk h1{margin:0;font:400 clamp(22px,1.9vw,26px)/1.3 var(--font);letter-spacing:-.012em;outline:none}
.wk-body{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.wk-status{margin:0;display:inline-flex;align-items:center;gap:9px;font:600 11px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase}
.wk-status i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.wk-soon{margin:0;font:400 clamp(56px,11vw,160px)/.92 var(--font);letter-spacing:-.05em}
/* The privacy notice (2026-11-11): a paper sheet in the Studio page's type, each part a label and a short text in the
   right-hand column. Reached from the letter's promise and the Studio page's foot. */
.pv{box-sizing:border-box;max-width:1472px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);
  padding:calc(54px + clamp(56px,8vw,112px) + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(140px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pv-head,.pv-row{display:flex;flex-wrap:wrap;gap:12px 16px}
.pv-head>*,.pv-row>*{flex:1 1 400px;min-width:0}
.pv h1,.pv-lede{margin:0;font:400 clamp(22px,1.9vw,26px)/1.3 var(--font);letter-spacing:-.012em}
.pv h1{outline:none}
.pv-lede{max-width:24em;color:var(--muted);text-wrap:pretty}
.pv-row{padding-top:14px;border-top:1px solid var(--line)}
.pv-row h2{margin:0;font:600 11px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-row p{max-width:34em;margin:0 0 12px;font-size:16px;line-height:1.6;text-wrap:pretty}
.pv-row p:last-child{margin-bottom:0}
.pv a,.st-note a,.brief-small a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pv-date{margin:0;font-size:13px;color:var(--muted)}
/* The Studio page is a dark sheet (Ryan's pick on 2026-11-11, after the about pages of Koto, basement.studio and Barkas):
   a quiet statement in the right-hand column, the five forms of Case 01 as its one band of red, then small type. */
.page-dark{background:var(--ink);color:var(--paper);box-shadow:0 -24px 60px rgba(21,21,18,.24)}
.st{--dim:rgba(242,239,232,.56);--soft:rgba(242,239,232,.68);--rule:rgba(242,239,232,.16);container-type:inline-size;
  box-sizing:border-box;max-width:1472px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(112px,13vw,176px);
  padding:calc(54px + clamp(56px,8vw,112px) + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.st section{scroll-margin-top:calc(76px + env(safe-area-inset-top,0px));outline:none}
.st-split{display:flex;flex-wrap:wrap;gap:24px 16px}
.st-split>*{flex:1 1 400px;min-width:0}
.st-label{margin:0;font:600 11px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.st-head{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.st-head h1,.st-lede{margin:0;font:400 clamp(22px,1.9vw,26px)/1.3 var(--font);letter-spacing:-.012em}
.st-head h1{outline:none}
.st-lede{max-width:24em;color:var(--dim);text-wrap:pretty}
.st-lede span{color:var(--paper)}
.st-jump{align-items:baseline}
.st-jump div{display:flex;flex-wrap:wrap;column-gap:22px}
.st-jump a{display:inline-block;padding:7px 0;font:600 11px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-decoration:none;transition:color .2s}
.st-jump a:hover{color:var(--red)}
.st-forms{--h:clamp(150px,calc((100cqw - 48px) / 5.7403),243px);margin:calc(-1 * clamp(32px,5vw,80px)) 0 0;display:flex;flex-direction:column;gap:14px}
.st-band{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;outline:none;
  margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:0 max(16px,env(safe-area-inset-left,0px))}
.st-band::-webkit-scrollbar{display:none}
.st-band:focus-visible{box-shadow:inset 0 0 0 2px var(--paper)}
.st-form{--c:22px;flex:0 0 auto;position:relative;width:calc(var(--h) * var(--r));height:var(--h);background:var(--red);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.st-form::after{content:"";position:absolute;right:0;bottom:0;width:var(--c);height:var(--c);background:linear-gradient(135deg,rgba(255,196,170,0) calc(50% - 6px),rgba(255,196,170,.32) 50%)}
.st-form.up{--c:20px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.st-form.up::after{top:0;bottom:auto;background:linear-gradient(45deg,rgba(255,196,170,0) calc(50% - 5px),rgba(255,196,170,.32) 50%)}
.st-form span{position:absolute;left:12px;bottom:10px;font:600 10px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.st-form.r169{--r:1.7778}
.st-form.r916{--r:.5625;--c:18px}
.st-form.r45{--r:.8}
.st-form.r11{--r:1}
.st-form.r1610{--r:1.6}
.st-forms figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px}
.st-col{display:flex;flex-direction:column;gap:26px}
.st-big{margin:0;max-width:15em;font:400 clamp(32px,3.5vw,48px)/1.08 var(--font);letter-spacing:-.03em;text-wrap:balance}
.st-body{margin:0;max-width:30em;font-size:17px;line-height:1.6;color:var(--soft);text-wrap:pretty}
.st-block{display:flex;flex-direction:column;gap:32px}
.st-ruled{padding-bottom:16px;border-bottom:1px solid var(--rule)}
.st-grid,.st-steps,.st-four{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px 16px}
.st-grid h3{margin:0 0 10px;font:400 clamp(24px,2.2vw,30px)/1.15 var(--font);letter-spacing:-.025em}
.st-grid p,.st-four p,.st-steps span{margin:0;max-width:22em;color:var(--soft);text-wrap:pretty}
.st-grid p{font-size:15.5px;line-height:1.55}
.st-steps{gap:16px;padding-top:28px;border-top:1px solid var(--rule)}
.st-steps li{display:flex;flex-direction:column;gap:6px}
.st-steps b{font:600 11px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.st-steps span{font-size:14.5px;line-height:1.5}
.st-ai{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.st-huge,.st-ask h2{margin:0;font:400 clamp(46px,8vw,112px)/.98 var(--font);letter-spacing:-.045em;text-wrap:balance}
.st-huge{max-width:12em}
.st-huge em{font-style:normal;color:var(--red)}
.st-four{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px 16px}
.st-four h3{margin:0 0 8px;font:500 17px/1.3 var(--font);letter-spacing:-.01em}
.st-four p{max-width:21em;font-size:15px;line-height:1.55}
.st-who{align-items:flex-end}
.st-who[hidden]{display:none}   /* until Ryan's portrait and lines arrive (Ryan, 2026-11-11) */
.st-who .st-col{gap:14px}
.st-who .st-label{margin-bottom:6px}
.st-name{margin:0;font:400 clamp(40px,5vw,68px)/1 var(--font);letter-spacing:-.04em}
.st-role{margin:0;font-size:17px;line-height:1.4;color:var(--soft)}
.st-lines{margin:10px 0 0;max-width:26em;padding:12px 14px;border:1px dashed rgba(242,239,232,.3);font-size:15px;line-height:1.5;color:var(--soft)}
.st-portrait{position:relative;margin:0;max-width:360px;aspect-ratio:4/5;background:#262622;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.st-portrait figcaption{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:12px;padding:13px 32px 13px 15px}
.st-brief{display:flex;flex-direction:column;gap:30px;padding-top:18px;border-top:1px solid var(--rule)}
.st-status{margin:0;display:inline-flex;align-items:center;gap:9px;font:600 11px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase}
.st-status i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.st-ask{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 16px}
.st-ask h2{flex:1 1 520px;max-width:10em}
.st-ask div{flex:0 1 380px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.st-ask p{margin:0;font-size:17px;line-height:1.55;color:var(--soft);text-wrap:pretty}
.st-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;font:600 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--paper);border-radius:2px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background-color .25s,color .25s}
.st-cta:hover{background:var(--red);color:var(--paper)}
.st-cta:focus-visible{outline:2px solid currentColor;outline-offset:-5px}
.st-foot{display:flex;flex-direction:column;gap:18px;margin-top:clamp(8px,2vw,24px);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.st-mark{margin:0;font:700 clamp(88px,24.5cqw,330px)/.78 var(--font);letter-spacing:-.07em;white-space:nowrap}
.st-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--dim)}

/* ---------- Narrow screens ---------- */
@media (max-width:760px){
  .label{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(48px + env(safe-area-inset-top,0px))}
  .s-contact{padding:86px 0 58px}
  .email{justify-content:center}
}
@media (max-width:420px){
  .pill{padding:6px 7px 5px;font-size:10.5px;letter-spacing:.06em}
  body.paged .chrome-top .end a[data-go]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .page,.page.closing{transition:none}
}