/* Breaking Point. Lacquer black, kinpaku gold. The seam is the idea: broken things, mended with gold. */

@font-face{font-family:"Alumni Sans Pinstripe";src:url("/assets/fonts/alumni-sans-pinstripe-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("/assets/fonts/albert-sans-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --lacquer:#020201;
  --surface:#13120f;
  --surface-2:#1c1b17;
  --seam:#2f2e28;
  --bone:#eeebe2;
  --ash:#a7a49c;
  --kinpaku:#ffba00;

  --display:"Alumni Sans Pinstripe","Arial Narrow",Impact,sans-serif;
  --text:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gutter:clamp(20px,4.5vw,64px);
  --max:1360px;
  --ease-out:cubic-bezier(.22,1,.36,1);

  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6.5rem;--s7:9rem;
  --section:clamp(3.25rem,6.5vw,6rem);
}
@supports (color:oklch(0% 0 0)){
  :root{
    --lacquer:oklch(7% .006 95);
    --surface:oklch(16% .008 95);
    --surface-2:oklch(22% .009 95);
    --seam:oklch(30% .01 95);
    --bone:oklch(94% .012 90);
    --ash:oklch(72% .012 90);
    --kinpaku:oklch(84% .19 80.46);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--lacquer);color:var(--bone);font-family:var(--text);font-size:clamp(1.0625rem,.35vw + 1rem,1.1875rem);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
::selection{background:var(--kinpaku);color:var(--lacquer)}

:focus-visible{outline:3px solid var(--kinpaku);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--kinpaku);color:var(--lacquer);padding:14px 20px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;color:var(--bone)}
.display-hero{font-size:clamp(5rem,min(15vw,19vh),11.5rem)}
.display-xl{font-size:clamp(6.5rem,22vw,19rem)}
.display-l{font-size:clamp(4.75rem,13vw,11.5rem)}
.display-m{font-size:clamp(3.75rem,8vw,7rem)}
.display-s{font-size:clamp(2.75rem,5vw,4.25rem);line-height:.9}
.gold{color:var(--kinpaku)}
.lead{font-size:clamp(1.25rem,1.1vw + 1rem,1.625rem);line-height:1.4;max-width:34ch;color:var(--bone)}
.prose{max-width:62ch}
.prose p+p{margin-top:1em}
.muted{color:var(--ash)}
h3,.h3{font-family:var(--text);font-weight:700;font-size:1.3125rem;line-height:1.25;letter-spacing:0}
.small{font-size:.9375rem;line-height:1.5}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 34px;background:var(--kinpaku);color:var(--lacquer);font-weight:700;font-size:1.0625rem;letter-spacing:.005em;text-decoration:none;border:0;cursor:pointer;transition:transform 140ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-line{background:transparent;color:var(--bone);border:2px solid var(--bone)}
.textlink{color:var(--kinpaku);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media(hover:hover){
  .btn:hover{background:var(--bone)}
  .btn-line:hover{background:var(--bone);color:var(--lacquer)}
  .textlink:hover{color:var(--bone)}
  .site-nav a:hover{color:var(--kinpaku)}
  .foot a:hover{color:var(--kinpaku)}
}

/* ---------- header ---------- */
.site-head{position:relative;z-index:50;border-bottom:1px solid var(--seam)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:88px}
.brand{display:block;line-height:0}
.brand img{height:68px;width:auto}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px)}
.site-nav a{text-decoration:none;font-weight:500;font-size:1rem;padding:10px 0}
.site-nav a[aria-current="page"]{color:var(--kinpaku)}
.site-nav .btn{min-height:48px;padding:0 24px;font-size:1rem;color:var(--lacquer)}
.menu-btn{display:none}

@media(max-width:1020px){
  .site-head .wrap{min-height:76px}
  .brand img{height:56px}
  .menu-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;background:none;border:0;font-weight:700;font-size:1.0625rem;cursor:pointer;color:var(--bone)}
  .menu-btn:active{transform:scale(.97)}
  .site-nav{position:fixed;inset:76px 0 0 0;z-index:60;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:var(--s3) var(--gutter) var(--s5);background:var(--lacquer);overflow-y:auto;visibility:hidden;opacity:0;transform:translate3d(0,-10px,0);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 200ms}
  .menu-open .site-nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .site-nav a{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3.25rem,14vw,4.5rem);line-height:1;padding:14px 0;border-bottom:1px solid var(--seam)}
  .site-nav .btn{margin-top:var(--s4);font-family:var(--text);text-transform:none;font-size:1.125rem;line-height:1;min-height:60px;border-bottom:0;justify-content:center}
  body.menu-open{overflow:hidden}
}

/* ---------- sections ---------- */
.section{padding-block:var(--section)}
.split{display:grid;gap:var(--s4) var(--s5);grid-template-columns:repeat(12,minmax(0,1fr))}
.split>.side{grid-column:1/span 4}
.split>.main{grid-column:6/span 7}
@media(max-width:900px){.split>.side,.split>.main{grid-column:1/-1}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(1.75rem,3.5vw,3.5rem) clamp(3rem,6vw,6rem)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s4);align-items:start}
.hero-copy{grid-column:1/span 7}
.hero-photo{grid-column:8/span 5;align-self:start;margin-top:.4rem}
.hero h1{margin-left:-.04em}
.hero-info{margin-top:clamp(1.25rem,2.2vw,2.25rem);display:grid;gap:var(--s3);max-width:40rem}
.hero-info .lead{max-width:30ch}
.hero-facts{color:var(--bone)}
.hero-facts dt{font-weight:700;margin-top:var(--s2)}
.hero-facts dd{color:var(--ash)}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
.hero-act .price{color:var(--ash);font-size:1rem}
@media(max-width:900px){
  .hero-copy,.hero-photo{grid-column:1/-1}
  .hero-photo{max-width:440px}
}

/* the broken photo: two pieces, one gold seam */
.broken{position:relative;aspect-ratio:4/5;min-height:340px}
.piece{position:absolute;inset:0;background:var(--surface)}
.piece img{width:100%;height:100%;object-fit:cover}
.piece-a{clip-path:polygon(0 0,58% 0,49% 18%,55% 33%,45% 52%,52% 70%,44% 100%,0 100%)}
.piece-b{clip-path:polygon(59.6% 0,100% 0,100% 100%,45.6% 100%,53.6% 70%,46.6% 52%,56.6% 33%,50.6% 18%,59.6% 0)}
.seam-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.seam-line polyline{fill:none;stroke:var(--kinpaku);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:miter}

/* jagged divider */
.seam{display:block;width:100%;height:22px}
.seam polyline{fill:none;stroke:var(--kinpaku);stroke-width:2;vector-effect:non-scaling-stroke}

/* ---------- lists that replace cards ---------- */
.steps{counter-reset:step}
.step{display:grid;grid-template-columns:clamp(4.5rem,9vw,8rem) 1fr;gap:var(--s3);padding-block:clamp(1.5rem,2.5vw,2.5rem);border-top:1px solid var(--seam)}
.step:last-child{border-bottom:1px solid var(--seam)}
.step-n{font-family:var(--display);font-size:clamp(4rem,8vw,7rem);line-height:.8;color:var(--kinpaku)}
.step h3{margin-bottom:.4em}
.step p{color:var(--ash);max-width:48ch}

.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{text-align:left;vertical-align:baseline;padding:clamp(1.1rem,2vw,1.75rem) 0;border-top:1px solid var(--seam);font-weight:400}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:1px solid var(--seam)}
.ptable .p-name{font-family:var(--text);font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.1;padding-right:var(--s3)}
.ptable .p-name small{display:block;font-weight:400;font-size:.9375rem;line-height:1.4;color:var(--ash);margin-top:.4em}
.ptable .p-what{color:var(--bone);padding-right:var(--s3)}
.ptable .p-time{color:var(--ash);white-space:nowrap;padding-right:var(--s3)}
.ptable .p-price{text-align:right;white-space:nowrap;font-weight:700;font-size:clamp(1.375rem,2vw,1.75rem)}
.ptable .p-go{text-align:right;width:1%;padding-left:var(--s3)}
.ptable a.textlink{white-space:nowrap}
.ptable caption{caption-side:bottom;text-align:left;color:var(--ash);padding-top:var(--s2);font-size:.9375rem}
.ptable thead th{padding:0 0 .75rem;border-top:0;font-size:.875rem;font-weight:500;color:var(--ash)}
@media(max-width:760px){
  .ptable,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block}
  .ptable thead{position:absolute;left:-9999px}
  .ptable tr{display:grid;grid-template-columns:1fr auto;gap:.25rem var(--s2);padding:var(--s3) 0;border-top:1px solid var(--seam)}
  .ptable tr:last-child{border-bottom:1px solid var(--seam)}
  .ptable th,.ptable td,.ptable tr:last-child th,.ptable tr:last-child td{border:0;padding:0}
  .ptable .p-name{grid-column:1/-1;font-size:1.75rem}
  .ptable .p-what{grid-column:1/-1}
  .ptable .p-time{grid-column:1}
  .ptable .p-price{grid-column:2;grid-row:3;align-self:baseline}
  .ptable .p-go{grid-column:1/-1;text-align:left;width:auto;padding:var(--s1) 0 0}
}

.kv{border-top:1px solid var(--seam)}
.kv>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);padding:1rem 0;border-bottom:1px solid var(--seam)}
.kv dt{font-weight:500}
.kv dd{font-weight:700;white-space:nowrap}

.rules>li{padding:1rem 0;border-top:1px solid var(--seam);max-width:62ch}
.rules>li:last-child{border-bottom:1px solid var(--seam)}

/* ---------- photos ---------- */
.ph{position:relative;background:var(--surface);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.js img[data-img]{opacity:0}
.js img[data-img].is-loaded{opacity:1;transition:opacity 500ms var(--ease-out)}

.trio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);align-items:start}
.trio .ph:nth-child(1){grid-column:1/span 7}
.trio .ph:nth-child(2){grid-column:9/span 4;margin-top:var(--s6)}
@media(max-width:900px){
  .trio .ph:nth-child(1){grid-column:1/-1}
  .trio .ph:nth-child(2){grid-column:4/span 9;margin-top:var(--s2)}
}

.wall{columns:3;column-gap:var(--s3)}
.wall .ph{break-inside:avoid;margin-bottom:var(--s3)}
@media(max-width:900px){.wall{columns:2;column-gap:var(--s2)}.wall .ph{margin-bottom:var(--s2)}}

/* ---------- locations ---------- */
.cities{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--seam)}
.city{padding:clamp(1.75rem,3vw,3rem) 0 clamp(1.75rem,3vw,3rem);}
.city+.city{padding-left:clamp(1.5rem,4vw,4rem);border-left:1px solid var(--seam)}
.city h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,5.2vw,4.5rem);line-height:.9;margin-bottom:var(--s2);-webkit-text-stroke:.6px currentColor}
.city address{font-style:normal;color:var(--ash);max-width:26ch}
.city .phone{display:block;margin-top:var(--s2);font-weight:700;font-size:1.25rem;text-decoration:none}
.city .wa{display:inline-block;margin-top:var(--s2)}
@media(max-width:760px){
  .cities{grid-template-columns:1fr}
  .city+.city{padding-left:0;border-left:0;border-top:1px solid var(--seam)}
}

/* ---------- closing band ---------- */
.closer{padding-block:var(--section)}
.closer .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4);align-items:end}
.closer h2{grid-column:1/span 8}
.closer .side{grid-column:9/span 4;display:grid;gap:var(--s3);justify-items:start}
@media(max-width:900px){.closer h2,.closer .side{grid-column:1/-1}}

/* ---------- page heads ---------- */
.page-head{padding-block:clamp(2.25rem,4.5vw,4.5rem) clamp(1.75rem,3.5vw,3rem)}
.page-head h1{max-width:12ch}
.page-head .lead{margin-top:var(--s3)}
.page-head .hero-act{margin-top:var(--s4)}

/* ---------- form ---------- */
.book{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5) var(--s5);align-items:start}
.book form{grid-column:1/span 7}
.book aside{grid-column:9/span 4}
@media(max-width:1020px){.book form,.book aside{grid-column:1/-1}}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.field{display:grid;gap:.5rem}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:1rem}
.field input,.field select{width:100%;min-height:58px;padding:0 16px;background:var(--surface);border:1px solid var(--seam);border-bottom:2px solid var(--ash);color:var(--bone);appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23eeebe2' stroke-width='2'/%3E%3C/svg%3E");background-position:right 18px center;background-repeat:no-repeat;padding-right:48px}
.field input:focus,.field select:focus{outline:3px solid var(--kinpaku);outline-offset:2px;border-bottom-color:var(--kinpaku)}
.field input:user-invalid,.field select:user-invalid{border-bottom-color:var(--kinpaku);border-bottom-width:4px}
.form-act{margin-top:var(--s4);display:grid;gap:var(--s2);justify-items:start}
.form-act .btn{min-width:min(100%,22rem)}
.status{min-height:1.5em;color:var(--bone)}
@media(max-width:640px){.fields{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.qa>div{padding:var(--s3) 0 var(--s4);border-top:1px solid var(--seam)}
.qa h3{margin-bottom:.5em}
.qa p{color:var(--ash);max-width:44ch}
@media(max-width:760px){.qa{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--seam);padding-block:var(--s5) var(--s4)}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4)}
.foot-brand{grid-column:1/span 4}
.foot-brand img{height:96px;width:auto;margin-bottom:var(--s2)}
.foot-brand p{color:var(--ash);max-width:26ch}
.foot nav{grid-column:6/span 4}
.foot nav ul{display:grid;gap:.25rem}
.foot nav a{display:inline-block;padding:.35rem 0;text-decoration:none;font-weight:500}
.foot .legal{grid-column:10/span 3}
.foot-end{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--seam);color:var(--ash);font-size:.9375rem}
@media(max-width:900px){
  .foot-brand,.foot nav,.foot .legal{grid-column:1/-1}
}

/* ---------- long text pages ---------- */
.legal-text h2{font-family:var(--text);font-weight:700;font-size:1.375rem;margin:var(--s4) 0 var(--s1)}
.legal-text h2:first-child{margin-top:0}
.legal-text p,.legal-text li{max-width:66ch;color:var(--bone)}
.legal-text ul{margin-top:.75rem;display:grid;gap:.5rem}
.legal-text li{padding-left:1.25rem;position:relative}
.legal-text li::before{content:"";position:absolute;left:0;top:.8em;width:.6rem;height:2px;background:var(--kinpaku)}

/* ---------- mobile booking bar ---------- */
.bookbar{display:none}
@media(max-width:1020px){
  .bookbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:var(--lacquer);border-top:1px solid var(--seam);transform:translate3d(0,100%,0);transition:transform 260ms var(--ease-out)}
  .bookbar.show{transform:none}
  .bookbar .btn{width:100%}
  body.has-bar{padding-bottom:84px}
}

/* ---------- motion: one orchestrated moment, then quiet ---------- */
.js .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em 0;margin:-.08em -.03em 0}
.js .w>span{display:inline-block;transform:translate3d(0,108%,0)}
.js .words-in .w>span{transform:none;transition:transform 800ms var(--ease-out);transition-delay:calc(var(--i)*90ms)}
.js .fade{opacity:0;transform:translate3d(0,18px,0)}
.js .fade.in{opacity:1;transform:none;transition:opacity 700ms var(--ease-out) var(--d,0ms),transform 700ms var(--ease-out) var(--d,0ms)}
.js .piece-a{transform:translate3d(0,26px,0)}
.js .piece-b{transform:translate3d(0,-26px,0)}
.js .mended .piece-a,.js .mended .piece-b{transform:none;transition:transform 1100ms var(--ease-out) 250ms}
.js .seam-line{opacity:0}
.js .mended .seam-line{opacity:1;transition:opacity 500ms var(--ease-out) 1250ms}

@media(prefers-reduced-motion:reduce){
  .js .w>span,.js .fade,.js .piece-a,.js .piece-b,.js .seam-line,.js img[data-img]{transition:none!important;transform:none!important;opacity:1!important}
  .site-nav,.bookbar{transition:none}
}

/* small utilities */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.only-menu{display:none}
@media(max-width:1020px){.only-menu{display:block}}
.book aside .city+.city{padding-left:0;border-left:0;border-top:1px solid var(--seam)}

/* hairline display face needs a touch more weight as it gets smaller */
.display-hero,.display-xl,.display-l{-webkit-text-stroke:.3px currentColor}
.display-m{-webkit-text-stroke:.6px currentColor}
.display-s{-webkit-text-stroke:.8px currentColor}
.step-n{-webkit-text-stroke:.8px currentColor}
.site-nav a{-webkit-text-stroke:0}

/* single column below the breakpoints (12 column gaps alone are wider than a phone) */
@media(max-width:1020px){.book{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .hero-grid,.split,.closer .wrap,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr)}
  .trio .ph:nth-child(1),.trio .ph:nth-child(2){grid-column:1}
  .trio .ph:nth-child(2){width:72%;margin-left:auto;margin-top:0}
}
@media(max-width:600px){.display-hero{font-size:min(26vw,6.75rem)}}
.site-nav a.btn{font-weight:700}
.page-head h1.display-m{max-width:16ch}