/* YILANG — shared design system (Studio Minimal, locked 2026-11-02) */
:root{
  --paper:#F2E9DE;
  --ink:#202F46;
  --italic-ink:#827C70;
  --hair:rgba(32,47,70,.18);
  --hair-strong:rgba(32,47,70,.4);
  --sans:"DM Sans",Helvetica,Arial,sans-serif;
  --serif:"Libre Caslon Text",Georgia,serif;
  --pad:clamp(20px,3.4vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em,i,.serif-i{color:var(--italic-ink)}

.label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.giant{font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(48px,8.2vw,116px)}
.giant em,.serif-i{font-family:var(--serif);font-style:italic;font-weight:400}
.giant em{text-transform:none;letter-spacing:0}

/* Mobile menu */
#menu-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{width:26px;height:12px;position:relative;cursor:pointer;display:none}
.burger span{position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);
  transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1)}
.burger span:first-child{top:0}
.burger span:last-child{top:10px}
#menu-toggle:checked ~ header .burger span:first-child{top:5px;transform:rotate(45deg)}
#menu-toggle:checked ~ header .burger span:last-child{top:5px;transform:rotate(-45deg)}
.menu-overlay{position:fixed;inset:0;z-index:30;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-start;padding:110px var(--pad) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1);
  overflow:auto}
#menu-toggle:checked ~ .menu-overlay{clip-path:inset(0 0 0 0)}
.menu-main{display:flex;flex-direction:column}
.menu-main > a{font-size:clamp(24px,3.8vw,50px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.08;border-bottom:1px solid var(--hair);
  padding:10px 0;display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.menu-main > a small{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--italic-ink);
  text-transform:none;font-size:16px;letter-spacing:0;flex:none}
.menu-main > a:hover{padding-left:12px;transition:padding .3s}
.menu-sub{margin-top:clamp(22px,4vh,44px)}
.menu-sub-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 24px;margin-top:12px}
.menu-sub-grid a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:7px 0;opacity:.7}
.menu-sub-grid a:hover{opacity:1}

/* subpage masthead */
.masthead{padding:clamp(140px,18vh,200px) var(--pad) clamp(48px,6vw,80px)}
.masthead .giant{font-size:clamp(44px,7.4vw,104px);margin-top:18px}
.masthead p.lede{max-width:560px;font-size:15px;line-height:1.75;margin-top:26px;opacity:.85}

/* generic sections */
section{padding:clamp(64px,9vw,130px) var(--pad);scroll-margin-top:110px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(30px,4vw,56px)}
.sec-head .num{opacity:.45}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,40px)}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,40px)}
.card{border-top:1px solid var(--ink);padding-top:16px}
.card h3{font-size:clamp(20px,2.2vw,28px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;margin:10px 0 10px}
.card p{font-size:13.5px;opacity:.8;max-width:420px}
.bigline{font-size:clamp(28px,4.4vw,58px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.04}
.bigline em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}

/* index rows */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:60px 1fr auto;align-items:baseline;gap:24px;
  padding:clamp(16px,2.2vw,28px) 0;border-bottom:1px solid var(--hair)}
.row .no,.row .tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}

/* event table */
.evt{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--hair)}
.evt .d{font-size:13px;font-weight:500}
.evt .n{font-size:clamp(17px,2vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.evt .l{font-size:12px;opacity:.6;margin-top:2px}
.evt .s{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;text-align:right;
  max-width:220px;line-height:1.7}

/* status chip */
.chip{display:inline-block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--hair-strong);padding:4px 10px;margin-top:10px}

/* ICS calendar export */
.icsbtn{background:none;border:none;border-bottom:1px solid var(--ink);
  font:inherit;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;padding:2px 0;margin-top:8px;opacity:.75;color:var(--ink);text-align:left}
.icsbtn:hover{opacity:1}

/* forms — draft only */
form.draft{border-top:1px solid var(--ink);padding-top:8px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px clamp(24px,3vw,48px);margin-top:26px}
.f-grid .full{grid-column:1/-1}
.fld label{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--hair-strong);padding:8px 0;font:inherit;color:inherit;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-bottom-color:var(--ink)}
.fld textarea{min-height:110px;resize:vertical}
.btn{display:inline-block;background:none;border:1px solid var(--ink);color:var(--ink);
  font:inherit;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  padding:14px 28px;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.draft-out{border:1px solid var(--hair-strong);padding:22px;margin-top:34px;
  white-space:pre-wrap;font-size:13px;line-height:1.75;display:none}
.draft-out.show{display:block}
.form-note{font-size:11px;opacity:.6;margin-top:18px;max-width:520px}

/* collections */
.filters{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--ink);
  padding-top:16px;margin-bottom:clamp(28px,4vw,48px)}
.filters .fgroup{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.filters .flabel{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.5;margin-right:10px}
.fbtn{background:none;border:none;font:inherit;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;padding:6px 12px;opacity:.5;color:var(--ink)}
.fbtn:hover{opacity:1}
.fbtn.on{opacity:1;text-decoration:underline;text-underline-offset:4px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.pitem .style-photo{overflow:hidden;aspect-ratio:4/5;background:#e4ded2}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.pgrid .pitem:hover img{transform:scale(1.04)}
.pgrid figcaption{border-top:1px solid var(--hair);margin-top:12px;padding-top:10px}
.pgrid .pname{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pgrid .pmeta{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-top:4px}
.pitem .add{margin-top:10px;background:none;border:none;font:inherit;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--ink);
  padding-bottom:3px;color:var(--ink)}
.pitem .add:hover{opacity:.6}
.pitem .add.inlist{border-color:transparent;opacity:.45;text-decoration:line-through}
.empty{display:none;border:1px dashed var(--hair-strong);padding:48px 24px;text-align:center;
  font-size:13px;opacity:.7}
.empty.show{display:block}
.shortlist{position:fixed;right:0;bottom:0;z-index:25;background:var(--ink);color:var(--paper);
  padding:14px 22px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;display:none;
  cursor:pointer;border:none;font-weight:500}
.shortlist.show{display:block}

/* footer */
footer{border-top:1px solid var(--ink);padding:26px var(--pad) 0}
.foot-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-bottom:26px}
.foot-meta a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-brand {
  padding: clamp(20px, 3vw, 44px) 0 clamp(36px, 5vw, 72px);
  text-align: center;
}
.footer-brand-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 700;
}
.footer-brand-name img { width: 1.1em; height: 1.1em; }
.footer-brand-motto { margin-top: clamp(10px, 1.2vw, 18px); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.5; }
.footer-brand-motto em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--italic-ink); }
.lang-switch{white-space:nowrap}
.lang-switch button{background:none;border:none;font:inherit;letter-spacing:inherit;
  text-transform:uppercase;color:inherit;cursor:pointer;opacity:.45;padding:0 2px}
.lang-switch button:hover{opacity:1}
.lang-switch button.on{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* big CTA block (shared) */
.cta{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  border-top:1px solid var(--ink);text-align:left}
.cta .big{font-size:clamp(38px,6.4vw,96px);line-height:1.02;font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;padding-top:20px}
.cta .big em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.cta-link{display:inline-block;flex-shrink:0;margin-bottom:14px;
  font-size:clamp(20px,2.2vw,30px);letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;border-bottom:2px solid var(--ink);padding-bottom:12px;
  transition:background .25s,color .25s}
.cta-link:hover{background:var(--ink);color:var(--paper)}

/* category cards (products overview) */
.catcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
@media (min-width:1200px){.range-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
.catcard{display:block}
.catcard figure{overflow:hidden;aspect-ratio:4/5;background:#e4ded2}
.catcard img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.catcard:hover img{transform:scale(1.04)}
.catcard .cc-head{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--ink);margin-top:12px;padding-top:12px}
.catcard h3{font-size:clamp(20px,2.2vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em}
.catcard h3 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.range-cards .catcard h3{font-size:clamp(17px,1.65vw,26px);line-height:1.2}
.catcard .cc-sub{font-size:12px;opacity:.65;margin-top:6px}
.catcard:hover h3{font-style:italic;font-family:var(--serif);font-weight:400;color:var(--italic-ink)}

/* spec / fact rows */
.spec{border-top:1px solid var(--ink)}
.spec .srow{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--hair)}
.spec .sk{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;padding-top:3px}
.spec .sv{font-size:14px;line-height:1.7;max-width:640px}

/* accordion (FAQ / service detail) */
.acc{border-top:1px solid var(--ink)}
.acc details{border-bottom:1px solid var(--hair)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:24px;padding:20px 0;
  font-size:clamp(16px,1.8vw,22px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pl{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;color:var(--italic-ink);transition:transform .3s}
.acc details[open] summary .pl{transform:rotate(45deg)}
.acc .acc-body{padding:0 0 24px;font-size:13.5px;line-height:1.75;max-width:640px;opacity:.85}
.acc summary:hover{padding-left:10px;transition:padding .25s}

/* long-form guide copy */
.guide{max-width:680px}
.guide h3{font-size:clamp(20px,2.4vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;margin:44px 0 14px}
.guide h3 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.guide p{font-size:14.5px;line-height:1.8;margin-bottom:14px;opacity:.88}
.guide ul{list-style:none;border-top:1px solid var(--hair);margin:10px 0 18px}
.guide li{font-size:13.5px;line-height:1.7;padding:10px 0;border-bottom:1px solid var(--hair);
  display:flex;gap:14px}
.guide li::before{content:"—";flex-shrink:0;opacity:.45}

/* full-width image band */
.imgband{position:relative;overflow:hidden}
.imgband img{width:100%;height:100%;object-fit:cover}
.imgband figcaption{display:flex;justify-content:space-between;
  border-top:1px solid var(--hair);margin-top:12px;padding-top:10px}

/* note strip */
.note-strip{border:1px dashed var(--hair-strong);padding:18px 22px;font-size:12px;
  line-height:1.7;opacity:.75;max-width:640px}

/* inline arrow link */
.textlink{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:4px}
.textlink:hover{background:var(--ink);color:var(--paper)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
@media (max-width:900px){
  .menu-main > a small{display:none}
  .menu-sub-grid{grid-template-columns:1fr 1fr}
  .cols2,.cols3{grid-template-columns:1fr}
  .cols4{grid-template-columns:1fr 1fr}
  .catcards{grid-template-columns:1fr}
  .catcard figure{aspect-ratio:16/10}
  .range-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .range-cards .catcard figure{aspect-ratio:4/5}
  .cta{flex-direction:column;align-items:flex-start}
  .spec .srow{grid-template-columns:1fr;gap:6px}
  .f-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .evt{grid-template-columns:1fr}
  .evt .s{text-align:left;max-width:none}
  .row{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .row .no{display:none}
}

/* Shared masthead on every page. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 24px;
  padding: 0 var(--pad);
}
.site-header .brand {
  display: flex;
  align-items: center;
  font-weight: 700;
  flex: none;
  gap: 10px;
  font-size: clamp(19px, 1.8vw, 27px);
  letter-spacing: .12em;
}
.site-header .brand-badge { width: 42px; height: 42px; flex: none; }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.55vw, 27px);
}
.site-nav .label {
  font-size: clamp(10px, .8vw, 12px);
  letter-spacing: .08em;
  font-weight: 700;
  white-space: nowrap;
}
.site-nav .enquiry-link { padding: 12px 17px; background: var(--ink); color: #fff; }
.site-header a:focus-visible { outline: 2px solid var(--italic-ink); outline-offset: 4px; }
@media (max-width: 1000px) {
  .site-nav .hide-m { display: none; }
  .site-nav .burger { display: block; }
}
@media (max-width: 700px) {
  .site-header { min-height: 68px; gap: 12px; }
  .site-header .brand { font-size: 18px; }
  .site-header .brand-badge { width: 36px; height: 36px; }
  .site-nav { gap: 14px; }
  .site-nav .enquiry-link { padding: 10px 11px; font-size: 10px; }
}

#menu-toggle:not(:checked) ~ .menu-overlay { visibility: hidden; }
#menu-toggle:focus-visible ~ .site-header .burger { outline: 2px solid var(--italic-ink); outline-offset: 6px; }