/* Creative Direction · the atelier: chalk strokes, a paper table, swatches pinned by hand */
.at-hero{position:relative;min-height:100svh;display:grid;align-content:center;padding:clamp(150px,16vw,200px) 0 clamp(70px,8vw,110px);overflow:hidden;isolation:isolate}
.at-hero::before{content:"";position:absolute;inset:-10%;z-index:-1;
  background:radial-gradient(40% 50% at 70% 40%,rgba(201,184,148,.10),transparent 70%),radial-gradient(35% 45% at 20% 80%,rgba(236,232,225,.05),transparent 70%)}
.at-hero .crumbs{margin-bottom:clamp(30px,5vw,60px)}
.at-hero h1{margin:0;font:300 clamp(60px,12.5vw,210px)/.86 var(--serif);letter-spacing:-.035em}
.at-hero h1 .l1{display:block}
.at-hero h1 .l2{display:block;text-align:right;font-style:italic;color:var(--champagne)}
.chalk{position:relative;height:clamp(40px,6vw,90px);margin-top:-.2em}
.chalk svg{position:absolute;right:0;width:min(62vw,860px);height:100%;overflow:visible}
.chalk path{fill:none;stroke:var(--champagne);stroke-width:1.4;stroke-linecap:round;opacity:.8}
.at-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,100px);align-items:end;margin-top:clamp(36px,5vw,70px)}
.at-row .kicker{justify-self:end}
@media (max-width:760px){.at-row{grid-template-columns:1fr}.at-row .kicker{justify-self:start}}

.at-intro{max-width:1440px;margin:0 auto;padding:clamp(80px,10vw,150px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px)}
.at-intro .drop{font:300 clamp(26px,2.8vw,40px)/1.3 var(--serif);margin:0;max-width:26ch}
@media (max-width:860px){.at-intro{grid-template-columns:1fr}}

/* the paper table: the one place the page turns light */
.table{--paper:oklch(92.5% .012 85);--paper-2:oklch(88% .016 82);--pen:oklch(18% .006 70);--pen-2:oklch(42% .01 70);
  background:var(--paper);color:var(--pen);padding:clamp(90px,11vw,160px) 0;position:relative;overflow:hidden}
.table::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.table .label{color:var(--pen-2)}
.table em{color:oklch(48% .06 75)}
.table-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,80px)}
.table .h2{color:var(--pen)}
.board{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(60px,auto);gap:clamp(12px,1.6vw,22px)}
.sw{position:relative;background:#FBF8F2;padding:10px 10px 14px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 30px rgba(40,30,20,.14);transform:rotate(var(--r,0deg)) translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--ease),box-shadow .6s var(--ease);will-change:transform}
.sw:hover{box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 44px rgba(40,30,20,.2)}
.sw i{display:block;aspect-ratio:1/1.1;background:var(--c)}
.sw b{display:block;margin-top:12px;font:400 19px/1 var(--serif);color:var(--pen)}
.sw small{display:block;margin-top:5px;font:500 9.5px var(--sans);letter-spacing:.18em;color:var(--pen-2);font-variant-numeric:tabular-nums}
.sw::before{content:"";position:absolute;left:50%;top:-7px;width:44px;height:14px;margin-left:-22px;background:rgba(236,226,205,.75);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.sw.s1{grid-column:1/4;--r:-3deg}.sw.s2{grid-column:4/6;margin-top:50px;--r:2deg}.sw.s3{grid-column:6/9;--r:-1deg}
.sw.s4{grid-column:10/13;margin-top:30px;--r:3deg}.sw.s5{grid-column:2/4;--r:2.5deg;margin-top:-10px}.sw.s6{grid-column:5/7;--r:-2deg;margin-top:20px}
.spec{grid-column:7/13;align-self:center;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:end;padding:20px 0 0;border-top:1px solid rgba(0,0,0,.14)}
.spec .aa{font:300 clamp(90px,11vw,170px)/.8 var(--serif);color:var(--pen)}
.spec .aa em{color:oklch(48% .06 75)}
.spec p{margin:0;font:400 13px/1.6 var(--sans);color:var(--pen-2);max-width:30ch}
.materials{margin-top:clamp(40px,6vw,70px);padding-top:18px;border-top:1px solid rgba(0,0,0,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;font:300 clamp(20px,2.2vw,30px)/1 var(--serif);font-style:italic;color:var(--pen)}
@media (max-width:860px){
  .board{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sw.s1{grid-column:1/4}.sw.s2{grid-column:4/7;margin-top:30px}.sw.s3{grid-column:1/4}.sw.s4{grid-column:4/7;margin-top:30px}
  .sw.s5,.sw.s6{display:none}
  .spec{grid-column:1/-1}
}

/* what we direct: words that open */
.direct{padding:clamp(90px,11vw,160px) 0}
.direct ul{list-style:none;margin:clamp(30px,5vw,60px) 0 0;padding:0;border-top:1px solid var(--line)}
.direct li{border-bottom:1px solid var(--line)}
.direct button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:clamp(18px,2.4vw,30px) 0}
.direct button:focus-visible{outline:1px solid var(--champagne);outline-offset:6px}
.direct h3{margin:0;font:300 clamp(34px,5vw,76px)/1 var(--serif);letter-spacing:-.015em;transition:color .6s var(--ease),transform .9s var(--ease)}
.direct .plus{position:relative;width:22px;height:22px;flex:none}
.direct .plus::before,.direct .plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-2);transition:transform .6s var(--ease),background .5s}
.direct .plus::after{transform:rotate(90deg)}
.direct .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.direct .body > div{overflow:hidden}
.direct .body p{margin:0;padding:0 0 clamp(20px,2.6vw,32px);color:var(--ink-2);max-width:52ch;font-size:17px}
.direct li.open .body{grid-template-rows:1fr}
.direct li.open h3,.direct li:hover h3{color:var(--champagne)}
.direct li:hover h3{transform:translateX(12px) skewX(-6deg)}
.direct li.open .plus::after{transform:rotate(0)}
.direct li.open .plus::before,.direct li.open .plus::after{background:var(--champagne)}

/* from brief to atelier */
.steps{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.steps ol{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.steps li{padding:0 clamp(18px,3vw,44px) 0 0;display:grid;gap:18px;align-content:start}
.steps li + li{padding-left:clamp(18px,3vw,44px);border-left:1px solid var(--line)}
.steps .rn{font:300 clamp(70px,9vw,140px)/.8 var(--serif);font-style:italic;color:var(--champagne)}
.steps h3{margin:0;font:300 clamp(26px,2.6vw,38px)/1.1 var(--serif)}
.steps p{margin:0;color:var(--ink-2);max-width:34ch}
@media (max-width:860px){.steps ol{grid-template-columns:1fr;gap:44px}.steps li + li{border-left:0;padding-left:0;padding-top:40px;border-top:1px solid var(--line)}}

.quote{padding:clamp(100px,13vw,190px) var(--gutter);text-align:center}
.quote blockquote{margin:0 auto;font:300 clamp(40px,6.4vw,104px)/1 var(--serif);letter-spacing:-.02em;max-width:14ch}