/* =========================================================
   Design Dimensions — Architects · Planners · Interior Designers
   Brand: classical (Ionic column) meets refined modern.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

@font-face {
  font-family: 'PapyrusLocal';
  src: url('../fonts/papyrus.ttf') format('truetype');
  font-display: swap;
}

:root {
  --ink:      #16161a;
  --ink-2:    #22222a;
  --paper:    #f6f3ec;
  --paper-2:  #efeae0;
  --muted:    #6f6b62;
  --line:     rgba(20,20,20,.12);
  --line-dk:  rgba(255,255,255,.14);
  --accent:   #a9793f;   /* bronze */
  --accent-d: #8a5f2d;
  --white:    #ffffff;

  --serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --papyrus: 'PapyrusLocal', 'Papyrus', var(--serif);

  --wrap: 1200px;
  --gap: clamp(1.5rem, 4vw, 4rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 .4em; letter-spacing: .01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
p  { margin: 0 0 1.1em; }

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .8rem;
}
.eyebrow::before { content:''; width: 34px; height: 1px; background: var(--accent); display:inline-block; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #3a3833; max-width: 62ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

/* Buttons ------------------------------------------------ */
.btn {
  --c: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 1rem 1.7rem; border: 1px solid var(--c); color: var(--c);
  background: transparent; cursor: pointer; transition: .35s var(--ease);
  border-radius: 0;
}
.btn:hover { background: var(--c); color: var(--paper); }
.btn--accent { --c: var(--accent); }
.btn--light { --c: rgba(255,255,255,.65); color:#fff; }
.btn--light:hover { background:#fff; color: var(--ink); border-color:#fff; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); }

/* ======================= HEADER ======================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding: 1.35rem 0;
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--papyrus); font-size: 1.55rem; letter-spacing: .02em; color: #fff; transition: color .4s; }
.brand__tag  { font-family: var(--sans); font-size: .58rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .5rem; transition: color .4s; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav a {
  font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82); position: relative; padding: .3rem 0; transition: color .3s;
}
.nav a::after { content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background: var(--accent); transition: width .35s var(--ease); }
.nav a:hover, .nav a.active { color:#fff; }
.nav a.active::after, .nav a:hover::after { width:100%; }

/* scrolled / solid header (also used on interior pages) */
.site-header.solid { background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(0,0,0,.06); padding: .9rem 0; }
.site-header.solid .brand__name { color: var(--ink); }
.site-header.solid .brand__tag  { color: var(--muted); }
.site-header.solid .nav a { color: #34322d; }
.site-header.solid .nav a:hover, .site-header.solid .nav a.active { color: var(--accent); }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; width:34px; height:26px; position:relative; }
.nav-toggle span { position:absolute; left:0; right:0; height:2px; background:#fff; transition:.3s var(--ease); }
.nav-toggle span:nth-child(1){ top:2px; } .nav-toggle span:nth-child(2){ top:12px; } .nav-toggle span:nth-child(3){ top:22px; }
.solid .nav-toggle span { background: var(--ink); }

/* ======================= HERO ======================= */
.hero { position: relative; background: #000; color: #fff; overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.hero__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,5rem); align-items: center; width: min(var(--wrap),92vw); margin-inline:auto; padding: 9rem 0 5rem; }
.hero__col img { width: 100%; max-height: 82vh; object-fit: contain; object-position: center; filter: drop-shadow(0 20px 60px rgba(0,0,0,.6)); }
.hero__col { position: relative; order: -1; }
.hero__eyebrow { color: var(--accent); }
.hero__name { font-family: var(--papyrus); font-size: clamp(2.4rem, 5vw, 4.6rem); line-height:.95; margin:0 0 .35em; color:#fff; white-space: nowrap; }
.hero__tag { font-size: .8rem; letter-spacing:.3em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom:1.6rem; }
.hero p.lead { color: rgba(255,255,255,.8); }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero__est { position:absolute; top:8rem; left:0; font-family:var(--serif); font-style:italic; font-size:1rem; color: rgba(255,255,255,.5); }
.hero__scroll { position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.hero__scroll::after { content:''; width:1px; height:44px; background:linear-gradient(rgba(255,255,255,.5),transparent); }

/* interior page hero (compact) */
.page-hero { background: #000; color:#fff; padding: 11rem 0 4.5rem; position:relative; }
.page-hero h1 { color:#fff; }
.page-hero .lead { color: rgba(255,255,255,.78); }
.page-hero__crumb { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom:1.5rem; }
.page-hero__crumb a:hover { color: var(--accent); }

/* ======================= SECTIONS ======================= */
section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem,4vw,3.5rem); }
.section-head.center { margin-inline:auto; }

/* Slider ------------------------------------------------- */
.slider { position: relative; background:#0e0e10; }
.slider__track { position: relative; height: min(74vh, 720px); }
.slide { position:absolute; inset:0; opacity:0; transition: opacity 1.1s var(--ease); }
.slide.active { opacity:1; }
.slide img { width:100%; height:100%; object-fit: cover; }
.slide::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.slide__cap { position:absolute; left: max(4vw, 2rem); bottom: 2.6rem; z-index:2; color:#fff; max-width: 60ch; }
.slide__cap .n { font-family:var(--serif); font-style:italic; color: var(--accent); font-size:1rem; display:block; margin-bottom:.4rem; }
.slide__cap h3 { color:#fff; font-size: clamp(1.4rem,3vw,2.2rem); margin:0; }
.slider__btn { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:54px; height:54px; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.25); color:#fff; cursor:pointer; font-size:1.1rem; display:grid; place-items:center; transition:.3s var(--ease); backdrop-filter: blur(2px); }
.slider__btn:hover { background:#fff; color:#000; border-color:#fff; }
.slider__btn.prev { left: 1.4rem; } .slider__btn.next { right: 1.4rem; }
.slider__dots { position:absolute; bottom:1.5rem; right: max(4vw,2rem); z-index:3; display:flex; gap:.6rem; }
.slider__dots button { width:32px; height:3px; background:rgba(255,255,255,.4); border:0; cursor:pointer; padding:0; transition:.3s; }
.slider__dots button.active { background:var(--accent); }

/* Category cards ---------------------------------------- */
.cats { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.5rem; }
.cat-card { position:relative; overflow:hidden; aspect-ratio: 3/4; background:#000; color:#fff; display:flex; align-items:flex-end; }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease), filter .6s; filter: grayscale(.25) brightness(.72); }
.cat-card:hover img { transform: scale(1.08); filter: grayscale(0) brightness(.8); }
.cat-card__body { position:relative; z-index:2; padding:1.6rem; width:100%; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.cat-card__body h3 { color:#fff; margin:0 0 .2rem; }
.cat-card__body span { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.75); }
.cat-card__body .arrow { color: var(--accent); }

/* Stats -------------------------------------------------- */
.stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 2rem; text-align:center; }
.stat .num { font-family:var(--serif); font-size: clamp(2.6rem,5vw,3.6rem); color: var(--accent); line-height:1; }
.stat .lbl { font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; }

/* Clients ------------------------------------------------ */
.clients-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); }
.clients-grid a, .clients-grid div { background: var(--white); display:grid; place-items:center; padding: 1.6rem 1.2rem; aspect-ratio: 16/10; }
.clients-grid img { max-height: 62px; width:auto; object-fit:contain; filter: grayscale(0) opacity(1); transition:.4s; }

/* Split feature ----------------------------------------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.split.alt { grid-template-columns: 1fr 1fr; }
.split__media img { width:100%; }
.dark-band { background: #000; color:#fff; }
.dark-band h2 { color:#fff; }
.dark-band .lead { color: rgba(255,255,255,.8); }
.on-dark { background:#000; }

/* ======================= PROJECTS ======================= */
/* Projects listing — black theme */
.proj-listing { background:#000; color:#fff; }
.proj-listing .proj-cat { border-top-color: rgba(255,255,255,.14); }
.proj-listing .proj-cat__head h2 { color:#fff; }
.proj-listing .tile { background:#111; }

/* Projects grid + pagination */
.proj-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px){ .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .proj-grid { grid-template-columns: 1fr; } }
.proj-pager { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:2.4rem; }
.proj-pager:empty { display:none; }
.proj-pager button { min-width:42px; height:42px; padding:0 .7rem; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.04em; cursor:pointer; transition:.3s var(--ease); }
.proj-pager button:hover:not(:disabled) { border-color:#fff; }
.proj-pager button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.proj-pager button:disabled { opacity:.3; cursor:default; }

.proj-cat { border-top: 1px solid var(--line); padding: clamp(3rem,6vw,5rem) 0; }
.proj-cat:first-of-type { border-top:0; }
.proj-cat__head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.proj-cat__head h2 { margin:0; }
.proj-cat__head .idx { font-family:var(--serif); font-style:italic; color:var(--accent); font-size:1.1rem; }
.scroller { display:grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 34vw); gap: 1.2rem; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 1.2rem; scrollbar-width: thin; }
.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius:10px; }
.tile { position:relative; scroll-snap-align:start; overflow:hidden; aspect-ratio: 7/5; cursor:pointer; background:var(--paper-2); }
.tile img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile__cap { position:absolute; inset:auto 0 0 0; padding:1.2rem 1rem .9rem; color:#fff; font-size:.82rem; letter-spacing:.02em; background:linear-gradient(transparent, rgba(0,0,0,.72)); opacity:0; transform: translateY(8px); transition:.4s var(--ease); }
.tile:hover .tile__cap { opacity:1; transform:none; }
.tile__zoom { position:absolute; top:1rem; right:1rem; width:38px; height:38px; border:1px solid rgba(255,255,255,.6); color:#fff; display:grid; place-items:center; opacity:0; transition:.4s; background:rgba(0,0,0,.25); }
.tile:hover .tile__zoom { opacity:1; }

/* Lightbox ---------------------------------------------- */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(10,10,12,.96); display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width: 90vw; max-height: 82vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__cap { position:absolute; bottom:2rem; left:0; right:0; text-align:center; color:rgba(255,255,255,.85); font-size:.9rem; letter-spacing:.03em; }
.lightbox__close { position:absolute; top:1.5rem; right:1.8rem; background:none; border:0; color:#fff; font-size:2rem; cursor:pointer; line-height:1; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid rgba(255,255,255,.35); color:#fff; width:56px; height:56px; font-size:1.3rem; cursor:pointer; display:grid; place-items:center; transition:.3s; }
.lightbox__nav:hover { background:#fff; color:#000; }
.lightbox__nav.prev { left:1.5rem; } .lightbox__nav.next { right:1.5rem; }

/* List modal -------------------------------------------- */
.modal { position:fixed; inset:0; z-index:210; background:rgba(15,15,17,.6); display:none; align-items:flex-start; justify-content:center; padding: 5vh 1rem; backdrop-filter: blur(3px); }
.modal.open { display:flex; }
.modal__panel { background:var(--paper); width:min(920px,96vw); max-height:90vh; overflow:auto; box-shadow:0 40px 100px rgba(0,0,0,.4); }
.modal__head { position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); padding:1.6rem 2rem; display:flex; align-items:center; justify-content:space-between; z-index:2; }
.modal__head h3 { margin:0; }
.modal__close { background:none; border:0; font-size:1.8rem; cursor:pointer; line-height:1; color:var(--muted); }
.modal__body { padding: 1.5rem 2rem 2.5rem; }
.modal__note { font-size:.82rem; color:var(--muted); margin-bottom:1.5rem; }
.list-group { margin-bottom:2rem; }
.list-group h4 { color:var(--accent); font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-bottom:1rem; }
.list-cols { columns: 2; column-gap: 2.5rem; }
@media(max-width:560px){ .list-cols{ columns:1; } }
.list-cols li { break-inside: avoid; font-size:.9rem; padding:.28rem 0; color:#3a3833; list-style:none; padding-left:1.2rem; position:relative; }
.list-cols li::before { content:''; position:absolute; left:0; top:.75em; width:5px; height:5px; background:var(--accent); }
.list-cols ol, .list-cols ul { margin:0; padding:0; }
.proj-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.proj-table th { text-align:left; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--line); padding:.7rem .6rem; }
.proj-table td { border-bottom:1px solid var(--line); padding:.75rem .6rem; vertical-align:top; color:#3a3833; }
.proj-table td.client { font-weight:500; color:var(--ink); width:32%; }
.proj-table tr:hover td { background: var(--paper-2); }
.proj-table .num { color:var(--accent); width:2.5rem; font-family:var(--serif); }

/* ======================= ABOUT ======================= */
.people { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); }
.person { }
.person__photo { aspect-ratio: 4/5; overflow:hidden; margin-bottom:1.4rem; background:var(--paper-2); }
.person__photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(.15); transition:.6s; }
.person:hover .person__photo img { filter:none; }
.person h3 { margin:0 0 .1rem; }
.person .role { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.person ul { padding-left:1.1rem; margin:.6rem 0; }
.person li { font-size:.92rem; color:#3a3833; margin-bottom:.35rem; }
.person .subhead { font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink); margin-top:1.1rem; }

/* ======================= SERVICES ======================= */
.svc-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc { background:var(--paper); padding: 2.2rem; }
.svc .no { font-family:var(--serif); font-size:1.1rem; color:var(--accent); font-style:italic; }
.svc h3 { margin:.6rem 0 1rem; }
.svc ul { list-style:none; padding:0; margin:0; }
.svc li { font-size:.92rem; color:#3a3833; padding:.4rem 0 .4rem 1.3rem; position:relative; border-bottom:1px dashed var(--line); }
.svc li:last-child { border-bottom:0; }
.svc li::before { content:'—'; position:absolute; left:0; color:var(--accent); }

/* ======================= CONTACT ======================= */
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); }
.contact-info dl { margin:0; }
.contact-info dt { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-top:1.6rem; }
.contact-info dd { margin:.3rem 0 0; font-size:1.05rem; color:var(--ink); }
.contact-info dd a:hover { color:var(--accent); }
.map { width:100%; height:100%; min-height:340px; border:0; filter: grayscale(.3); }

/* Location plan */
.location-map { position:relative; border:1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.location-map img { width:100%; display:block; }
.location-actions { position:absolute; left:1.4rem; bottom:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.location-actions .btn { background:var(--paper); }
.location-actions .btn--solid { background:var(--ink); }
.location-actions .btn--solid:hover { background:var(--accent); }
@media(max-width:640px){
  .location-actions { position:static; margin-top:1.2rem; }
}

/* Footer profile download */
.footer-download { display:inline-block !important; margin-top:1rem; color:var(--accent) !important; font-weight:600; font-size:.82rem !important; letter-spacing:.04em; border:1px solid rgba(169,121,63,.5); padding:.6rem .9rem; transition:.3s var(--ease); }
.footer-download:hover { background:var(--accent); color:var(--ink) !important; border-color:var(--accent); }
.form-row { display:grid; gap:1.2rem; }
.form-row.two { grid-template-columns:1fr 1fr; }
.field label { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.field input, .field textarea { width:100%; padding:.9rem 1rem; border:1px solid var(--line); background:var(--white); font-family:var(--sans); font-size:.95rem; color:var(--ink); border-radius:0; transition:border .3s; }
.field input:focus, .field textarea:focus { outline:0; border-color:var(--accent); }

/* ======================= FOOTER ======================= */
.site-footer { background:#000; color:rgba(255,255,255,.72); padding: 4.5rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line-dk); }
.site-footer .brand__name { font-family:var(--papyrus); font-size:1.6rem; color:#fff; }
.site-footer .brand__tag { color:rgba(255,255,255,.55); letter-spacing:.24em; font-size:.6rem; text-transform:uppercase; margin-top:.6rem; display:block; }
.footer-col h4 { font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:1.2rem; }
.footer-col a, .footer-col p { color:rgba(255,255,255,.7); font-size:.9rem; display:block; margin-bottom:.6rem; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.78rem; color:rgba(255,255,255,.5); }

/* Reveal animation -------------------------------------- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; padding-top: 8rem; gap:2.5rem; }
  .hero__col { order:-1; max-width:320px; }
  .hero__col img { max-height:52vh; }
  .hero__est { display:none; }
  .split, .contact-grid, .people, .footer-grid { grid-template-columns: 1fr; }
  .footer-grid { gap:2rem; }
  .form-row.two { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .nav { position: fixed; inset:0 0 0 auto; width:min(320px,82vw); background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center; padding:3rem 2.5rem; gap:1.6rem; transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.4); }
  .nav.open { transform:none; }
  .nav a { color:#fff !important; font-size:1rem; }
  .nav-toggle { display:block; z-index:110; }
  .solid .nav-toggle span { background: var(--ink); }
  .nav-toggle.open span { background:#fff; }
  .nav-toggle.open span:nth-child(1){ top:12px; transform:rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ top:12px; transform:rotate(-45deg); }
  .scroller { grid-auto-columns: minmax(260px, 82vw); }
}