/* Vellum v4. Quiet page, loud work. */
:root{
  --paper:#F2F0EA;
  --ink:#1B1B18;
  --ink-2:#55544D;
  --line:#D9D6CC;
  --red:#C4432B;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:1360px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* top */
.top{display:flex;justify-content:space-between;align-items:center;height:76px}
.mark{font-weight:600;font-size:20px;letter-spacing:-.03em;position:relative}
.mark::after{content:"";position:absolute;left:-2px;right:-4px;bottom:-3px;height:3px;background:var(--red);border-radius:2px;transform:rotate(-1.2deg)}
.top__mail{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.top__mail:hover{color:var(--red)}

/* hero */
.hero{padding-top:clamp(72px,12vw,180px);padding-bottom:clamp(72px,10vw,150px)}
.hero h1{font-weight:500;font-size:clamp(44px,7.4vw,118px);line-height:.98;letter-spacing:-.045em;max-width:12ch}
.hero__foot{margin-top:clamp(36px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;border-top:1px solid var(--line);padding-top:24px}
.hero__sub{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2)}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.plain{font-family:var(--mono);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:2px}
.plain:hover{color:var(--red);border-color:var(--red)}

/* section label */
.label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--ink);padding-top:12px;margin-bottom:clamp(28px,4vw,48px)}

/* work */
.work{padding-bottom:clamp(64px,8vw,120px)}
.shot{margin-bottom:clamp(48px,7vw,104px)}
.frame{border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 60px -30px rgba(40,30,20,.35);transition:transform .35s ease}
.shot:hover .frame{transform:translateY(-3px)}
.shot figcaption{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* every concept is a fixed 16:10 canvas that scales with its width (cqw) */
.frame{container-type:inline-size}
.cx{position:relative;aspect-ratio:16/10;overflow:hidden;font-size:1cqw}

/* 01 BRASA */
.brasa{background:#14100E;color:#F1E5D6;font-family:"DM Mono",monospace}
.br-nav{position:absolute;inset:3cqw 4cqw auto;display:flex;align-items:center;justify-content:space-between;font-size:1.05cqw;letter-spacing:.08em;text-transform:uppercase;z-index:2}
.br-logo{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:1.9cqw;letter-spacing:.12em}
.br-links{display:flex;gap:3cqw;opacity:.75}
.br-tel{color:#F7A06E}
.br-glow{position:absolute;left:50%;top:62%;width:70cqw;height:70cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#FF7A2F 0%,#D9381E 22%,rgba(140,20,10,.55) 42%,rgba(20,16,14,0) 66%)}
.br-word{position:absolute;left:0;right:0;top:9cqw;text-align:center;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:33cqw;line-height:.8;letter-spacing:-.01em;color:#F1E5D6;mix-blend-mode:normal}
.br-row{position:absolute;left:4cqw;right:4cqw;bottom:3.4cqw;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:4cqw;z-index:2}
.br-menu{font-size:1.1cqw;line-height:2.1}
.br-menu li{display:flex;justify-content:space-between;border-bottom:1px solid rgba(241,229,214,.22)}
.br-line{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;font-size:2.7cqw;line-height:1.05;text-align:center;color:#FFE2C8}
.br-hours{font-size:1.1cqw;line-height:1.7;text-align:right;text-transform:uppercase;letter-spacing:.06em;opacity:.8}

/* 02 MARLOW CLAY */
.clay{background:#EBDCCD;color:#2B1D16;font-family:"Bricolage Grotesque",sans-serif}
.cl-nav{position:absolute;inset:3cqw 4cqw auto;display:flex;justify-content:space-between;align-items:center;font-size:1.3cqw}
.cl-logo{font-weight:800;font-size:2cqw;letter-spacing:-.04em}
.cl-links{display:flex;gap:2.6cqw;font-weight:500}
.cl-body{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;gap:2cqw;align-items:end;padding:0 4cqw 4.5cqw}
.cl-h{font-weight:800;font-size:10cqw;white-space:nowrap;line-height:.86;letter-spacing:-.055em}
.cl-sub{margin-top:2.6cqw;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:2.4cqw;color:#A24E2C}
.cl-shelf{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:2.6cqw;border-bottom:.25cqw solid #2B1D16;padding:0 1cqw 0}
.cl-shelf::before{content:"";position:absolute;left:50%;bottom:0;width:30cqw;height:44cqw;transform:translateX(-50%);background:#DFC2A8;border-radius:15cqw 15cqw 0 0;z-index:0}
.pot{position:relative;z-index:1}
.pot{display:flex;flex-direction:column;align-items:center}
.pot svg{display:block;width:12cqw;height:auto}
.pot--bowl svg{width:16cqw}
.pot--cup svg{width:8.5cqw}
.pot p{position:relative;top:1.6cqw;margin-bottom:0;display:flex;gap:1cqw;font-family:"DM Mono",monospace;font-size:.95cqw;white-space:nowrap;transform:translateY(100%)}
.clay .cl-shelf{margin-bottom:3cqw}

/* 03 FIELDHOUSE */
.field{background:#F5F5F1;color:#2340E8;font-family:"Inter Tight",sans-serif}
.fh-nav{position:absolute;inset:3cqw 4cqw auto;display:flex;align-items:center;justify-content:space-between;font-size:1.25cqw;font-weight:500;color:#14183A}
.fh-logo{display:flex;align-items:center;gap:.8cqw;font-weight:800;font-size:1.7cqw;letter-spacing:-.03em;color:#2340E8}
.fh-logo i{width:1.4cqw;height:1.4cqw;background:#2340E8;display:block}
.fh-links{display:flex;gap:3cqw;margin-left:auto;margin-right:4cqw}
.fh-tel{color:#2340E8;font-weight:700}
.fh-body{position:absolute;left:4cqw;right:4cqw;top:10cqw;display:grid;grid-template-columns:1.9fr 1fr;gap:3cqw;align-items:end}
.fh-h{font-weight:800;font-size:21cqw;line-height:.8;margin-left:-1cqw;letter-spacing:-.07em}
.fh-panel{background:#2340E8;color:#fff;padding:2.4cqw;margin-bottom:3cqw;display:flex;flex-direction:column;justify-content:space-between}
.fh-k{font-size:1.15cqw;font-weight:500;letter-spacing:.02em;opacity:.85}
.fh-k--b{opacity:.65}
.fh-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw;margin:2cqw 0}
.fh-slots span{border-top:1px solid rgba(255,255,255,.3);padding:1.1cqw 0 0;font-size:1.6cqw;font-weight:400;opacity:.75}
.fh-slots .on{opacity:1;font-weight:700;border-top:2px solid #fff}
.fh-list{position:absolute;left:4cqw;right:4cqw;bottom:3cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;color:#14183A;font-size:1.5cqw;font-weight:500}
.fh-list li{border-top:2px solid #14183A;padding-top:1cqw;display:flex;gap:1.4cqw}
.fh-list b{color:#2340E8;font-weight:700}

/* offer */
.offer{padding-bottom:clamp(64px,8vw,120px)}
.offer__list{display:flex;flex-wrap:wrap;gap:8px clamp(24px,4vw,64px);font-size:clamp(28px,3.6vw,52px);font-weight:500;letter-spacing:-.035em}
.offer__list li+li::before{content:"/";color:var(--line);margin-right:clamp(24px,4vw,64px)}

/* contact */
.contact{padding-bottom:clamp(64px,9vw,140px)}
.contact__mail{display:inline-block;font-size:clamp(30px,6vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1.02;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;overflow-wrap:anywhere}
.contact__mail:hover{color:var(--red);border-color:var(--red)}
.contact__tel{display:block;margin-top:24px;font-family:var(--mono);font-size:clamp(15px,1.4vw,18px);color:var(--ink-2)}
.contact__tel:hover{color:var(--red)}

.foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;padding-bottom:28px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* mobile */
@media (max-width:640px){
  .top__mail{display:none}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .offer__list li+li::before{margin-right:16px}
  .offer__list{gap:4px 16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .shot:hover .frame{transform:none}
}
@media (max-width:640px){
  .offer__list li+li::before{content:none}
  .offer__list{gap:4px 18px;font-size:25px}
  .frame{margin:0 calc(var(--pad) * -0.5);border-radius:4px}
}

/* nav + journal */
.top__nav{display:flex;align-items:center;gap:28px}
.top__nav>a:not(.top__mail){font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.top__nav a:hover,.foot a:hover{color:var(--red)}
.jidx{padding-top:clamp(56px,9vw,128px);padding-bottom:clamp(56px,8vw,112px)}
.jidx h1,.post h1{font-weight:500;letter-spacing:-.045em;line-height:1}
.jidx h1{font-size:clamp(44px,7.4vw,118px)}
.jidx__sub{margin:20px 0 clamp(48px,6vw,88px);font-size:clamp(17px,1.4vw,20px);color:var(--ink-2)}
.jlist li{border-bottom:1px solid var(--line)}
.jlist a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px 40px;align-items:baseline;padding:22px 0}
.jlist h2{font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;line-height:1.15}
.jlist p{color:var(--ink-2);font-size:15px}
.jlist time{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.jlist a:hover h2{color:var(--red)}
.post{padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(56px,8vw,112px)}
.post article{max-width:680px}
.post .label a:hover{color:var(--red)}
.post h1{font-size:clamp(36px,5vw,64px);max-width:16ch;margin-bottom:clamp(32px,4vw,56px)}
.prose{font-size:18px;line-height:1.65}
.prose p,.prose ul{margin-bottom:1.1em}
.prose h2{font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.3;margin:2em 0 .6em}
.prose ul{padding-left:1.1em;list-style:disc}
.prose li{margin-bottom:.3em}
.prose li::marker{color:var(--ink-2)}
.prose a{border-bottom:1px solid var(--line)}
.jidx__sub .plain{font-family:inherit;font-size:inherit}
.jfoot{padding-top:0}
.jfoot__c{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:clamp(48px,6vw,80px)}
.jfoot .foot{padding-left:0;padding-right:0}
@media (max-width:640px){
  .jlist a{grid-template-columns:1fr;gap:6px}
  .top__nav{gap:0}
}