/* Ryu Albany launch preview. Project style (system 3): palette and faces from the website build. */
@font-face{font-family:'Homade';src:url(../fonts/Homade-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Homade';src:url(../fonts/Homade-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Sequel';src:url(../fonts/Sequel-Sans-Light-Body-Text.otf) format('opentype');font-weight:300}
@font-face{font-family:'Sequel';src:url(../fonts/Sequel-Sans-Book-Body-Text.otf) format('opentype');font-weight:400}
@font-face{font-family:'Sequel';src:url(../fonts/Sequel-Sans-Medium-Body-Text.otf) format('opentype');font-weight:500}
:root{--paper:#F3F0EB;--paper2:#ECE8E2;--paper3:#DDD8CF;--matcha:#C7C58C;--olive:#455538;--rust:#88341C;--drust:#47271D;--ink:#231F20;
  --pad:clamp(20px,4.4vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:300 16px/1.55 'Sequel',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper)}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.label{font:500 11px/1.4 'Sequel',sans-serif;letter-spacing:.16em;text-transform:uppercase}

/* ---------- PIN page ---------- */
body[data-page="pin"]{background:var(--olive);color:var(--paper);min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  background-image:url(../brand/waves-matcha.svg);background-size:auto 118%;background-position:right -8vw center;background-repeat:no-repeat}
.pin-top{display:flex;justify-content:space-between;align-items:center;padding:var(--pad)}
.pin-top img{height:46px;width:auto}
.pin-top .seal{height:44px}
.pin-main{align-self:center;padding:0 var(--pad);max-width:760px}
.pin-main h1{font:400 clamp(52px,11vw,132px)/.92 'Homade',serif;letter-spacing:-.01em;margin:.25em 0 .35em}
.pin-main p{max-width:30em;opacity:.86}
form.pin{margin-top:36px;display:flex;gap:0;max-width:420px;border-bottom:1px solid var(--paper)}
form.pin input{flex:1;min-width:0;background:none;border:0;color:var(--paper);font:400 28px/1 'Homade',serif;letter-spacing:.24em;
  text-transform:uppercase;padding:10px 0}
form.pin input::placeholder{color:rgba(243,240,235,.45);letter-spacing:.08em;font-size:20px}
form.pin input:focus{outline:none}
form.pin button{padding:10px 0 10px 16px;font:500 12px 'Sequel';letter-spacing:.16em;text-transform:uppercase}
.err{margin-top:14px;color:var(--matcha)}
.pin-foot{padding:var(--pad);font-size:12px;opacity:.7}

/* ---------- Home ---------- */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--pad);border-bottom:1px solid var(--paper3)}
.top .wm{height:40px;width:auto;justify-self:center}
.top .out{justify-self:end}
.top a{text-decoration:none}
.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--pad);padding:clamp(48px,9vw,120px) var(--pad) clamp(36px,6vw,72px);align-items:end}
.intro h1{font:400 clamp(56px,10vw,150px)/.9 'Homade',serif;letter-spacing:-.015em}
.intro p{max-width:28em}
.intro .label{display:block;margin-bottom:16px;color:var(--rust)}

/* Website: the lead item, full width */
.lead{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:var(--ink);color:var(--paper);text-decoration:none;margin:0 var(--pad)}
.lead .shot{overflow:hidden;aspect-ratio:16/10}
.lead .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lead:hover .shot img{transform:scale(1.025)}
.lead .txt{padding:clamp(24px,3.6vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.lead h2{font:400 clamp(44px,6vw,92px)/.92 'Homade',serif}
.lead .go{border-top:1px solid rgba(243,240,235,.3);padding-top:16px;display:flex;justify-content:space-between}

/* Sections */
.sec{padding:clamp(56px,8vw,112px) var(--pad) 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(24px,3vw,40px)}
.sec-head h2{font:400 clamp(30px,3.4vw,48px)/1 'Homade',serif}

/* Print: covers stand like objects on the paper */
.print{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.doc{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.doc .cv{background:var(--paper2);padding:clamp(18px,3vw,44px);display:grid;place-items:center;aspect-ratio:1/1;transition:background .3s}
.doc:hover .cv{background:var(--paper3)}
.doc .cv img{max-height:100%;box-shadow:0 1px 2px rgba(35,31,32,.12),0 18px 40px -18px rgba(35,31,32,.45)}
.doc h3{font:400 26px/1.05 'Homade',serif}
.doc p{font-size:14px;max-width:26em}
.doc .meta{display:flex;gap:14px;flex-wrap:wrap}
.doc .meta a{font:500 11px 'Sequel';letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;text-decoration:none}

/* Image work: renders and social, side by side, unequal */
.image{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3vw,48px)}
.img-tile{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.img-tile .ph{overflow:hidden;aspect-ratio:4/3;background:var(--paper2)}
.img-tile.set .ph{aspect-ratio:auto;background:none}
.img-tile.set .ph img{height:auto}
.img-tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.img-tile:hover .ph img{transform:scale(1.03)}
.img-tile h3{font:400 32px/1 'Homade',serif}

/* Legal and commercial: a ledger, not tiles */
.ledger{list-style:none;border-top:1px solid var(--paper3)}
.ledger li{border-bottom:1px solid var(--paper3)}
.ledger a{display:grid;grid-template-columns:64px minmax(0,1.4fr) minmax(0,2fr) auto;gap:24px;align-items:center;padding:18px 0;text-decoration:none}
.ledger img{width:64px;height:auto;box-shadow:0 8px 18px -10px rgba(35,31,32,.5)}
.ledger h3{font:400 24px/1.1 'Homade',serif}
.ledger p{font-size:14px}
.chip{font:500 10.5px/1 'Sequel';letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border:1px solid currentColor;white-space:nowrap}
.chip.held{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.chip.draft{color:var(--olive)}
.ledger a:hover h3{color:var(--rust)}

footer.foot{margin-top:clamp(72px,10vw,140px);background:var(--ink);color:var(--paper);padding:40px var(--pad);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px}
footer.foot img{height:40px;width:auto}

/* ---------- Sub pages (renders, social) ---------- */
header.sub{padding:28px var(--pad) 28px}
header.sub .back{font:500 11px 'Sequel';letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor}
header.sub h1{font:400 clamp(52px,8vw,112px)/.95 'Homade',serif;margin:28px 0 14px}
header.sub .note{max-width:46em;font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.filters button,.vs button{font:500 11px 'Sequel';letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border:1px solid var(--paper3)}
.filters button[aria-pressed="true"],.vs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:36px 24px;padding:8px var(--pad) 80px}
.plate img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--paper2)}
.plate figcaption{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.plate .cam{font:500 12px 'Sequel';letter-spacing:.12em}
.vs{display:flex;gap:6px;flex-wrap:wrap}
.vs button{padding:6px 8px;font-size:10px}

@media (max-width:860px){
  .intro,.lead,.image{grid-template-columns:1fr}
  .print{grid-template-columns:1fr 1fr}
  .ledger a{grid-template-columns:48px minmax(0,1fr) auto;gap:14px}
  .ledger a p{display:none}
  .ledger img{width:48px}
}
@media (max-width:520px){ .print{grid-template-columns:1fr} .top .out span{display:none} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}