/* forinpop — riso-print register
   Two flat plates per accent, shifted a few pixels and overprinted with multiply.
   Plates: pink, teal, yolk, violet on off-white stock, ink for type. */

:root{
  --stock:#F1EEE6;
  --stock-deep:#E6E0D2;
  --ink:#1C1A17;
  --ink-soft:#4A4640;
  --pink:#E8467C;
  --teal:#1F8A83;
  --yolk:#E8B23D;
  --violet:#6A4E9E;
  --type-head:"Space Mono",ui-monospace,Menlo,monospace;
  --type-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --side:clamp(16px,4.2vw,56px);
  --sheet:1216px;
  --slip:.055em;           /* misregistration distance, relative to type size */
  --slip-y:.04em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;
  background-color:var(--stock);
  /* paper tooth: a tiny tiled noise, drawn as SVG so no gradient is used */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);
  font:400 1.0625rem/1.68 var(--type-body);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--type-head);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.02em}

.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--stock);padding:8px 14px;z-index:99;font:700 .85rem var(--type-head)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

.sheet{max-width:var(--sheet);margin:0 auto;padding:0 var(--side)}

/* ---------- the misregistration device ----------
   .rz carries its own text in data-ink. The ::after copy is a second plate,
   shifted by --slip and multiplied over the first, so overlaps darken and
   the fringes show both colours. Used on headings and accents only. */
.rz{position:relative;display:inline-block;color:var(--plate-a,var(--ink))}
.rz::after{
  content:attr(data-ink);
  content:attr(data-ink) / "";
  position:absolute;left:0;top:0;width:100%;
  color:var(--plate-b,var(--pink));
  transform:translate(var(--slip),var(--slip-y));
  mix-blend-mode:multiply;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
/* ghost variant: second plate sits under the type (for pale type on a plate) */
.rz.ghost::after{z-index:-1}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--stock);
  border-bottom:2px solid var(--ink);
}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 1.3rem/1 var(--type-head);letter-spacing:-.04em}
.logo-dot{position:relative;width:26px;height:26px;flex:none}
.logo-dot::before,.logo-dot::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%}
.logo-dot::before{left:0;top:0;background:var(--pink)}
.logo-dot::after{left:6px;top:6px;background:var(--teal);mix-blend-mode:multiply}
.logo small{font-size:.62em;color:var(--ink-soft);letter-spacing:0}
.logo-word{display:inline-flex;align-items:baseline}

.nav{display:flex;gap:clamp(14px,2.4vw,34px);margin:0;padding:0;list-style:none}
.nav a{
  position:relative;display:inline-block;padding:10px 0 12px;
  text-decoration:none;font:700 .8rem/1 var(--type-head);text-transform:uppercase;letter-spacing:.06em;
}
.nav a::before,.nav a::after{
  content:"";position:absolute;left:0;right:0;height:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.nav a::before{bottom:4px;background:var(--pink)}
.nav a::after{bottom:1px;left:4px;right:-4px;background:var(--teal);mix-blend-mode:multiply;transition-delay:.05s}
.nav a:hover::before,.nav a:hover::after,
.nav a[aria-current="page"]::before,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.menu-btn{display:none;background:none;border:2px solid var(--ink);width:46px;height:40px;padding:0;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.menu-btn span:nth-child(1){top:12px}
.menu-btn span:nth-child(2){top:18px;background:var(--pink)}
.menu-btn span:nth-child(3){top:24px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- print furniture: crop marks and colour bar ---------- */
.crop{position:absolute;width:22px;height:22px;pointer-events:none;color:var(--ink)}
.crop svg{width:100%;height:100%;display:block}
.colour-bar{display:flex;gap:0;margin-top:30px;border:2px solid var(--ink);width:max-content;max-width:100%}
.colour-bar i{display:block;width:34px;height:22px;border-right:2px solid var(--ink)}
.colour-bar i:last-child{border-right:0}
.cb-p{background:var(--pink)}.cb-t{background:var(--teal)}.cb-y{background:var(--yolk)}.cb-v{background:var(--violet)}
.cb-pt,.cb-yv{position:relative;background:var(--stock)}
.cb-pt::before,.cb-pt::after,.cb-yv::before,.cb-yv::after{content:"";position:absolute;top:3px;bottom:3px;width:52%}
.cb-pt::before{left:12%;background:var(--pink)}.cb-pt::after{left:36%;background:var(--teal);mix-blend-mode:multiply}
.cb-yv::before{left:12%;background:var(--yolk)}.cb-yv::after{left:36%;background:var(--violet);mix-blend-mode:multiply}

/* ---------- home hero ---------- */
.hero{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,100px);border-bottom:2px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,76px);align-items:center}
.hero .crop.tl{left:calc(var(--side) - 12px);top:18px}
.hero .crop.br{right:calc(var(--side) - 12px);bottom:18px;transform:rotate(180deg)}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font:700 .78rem/1.3 var(--type-head);text-transform:uppercase;letter-spacing:.08em}
.kicker::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--yolk);box-shadow:4px 3px 0 var(--violet)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.1rem);--plate-a:var(--teal);--plate-b:var(--pink)}

.standfirst{margin:26px 0 0;max-width:34em;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft)}

/* photo slot, framed by two misregistered borders */
.slot{position:relative;margin:0}
.slot-frame{position:relative;aspect-ratio:4/3;border:2px solid var(--ink);background:var(--stock-deep);overflow:hidden}
.slot-frame::before,.slot-frame::after{content:"";position:absolute;inset:-2px;pointer-events:none;mix-blend-mode:multiply;z-index:1}
.slot-frame::before{border:4px solid var(--pink);transform:translate(12px,12px)}
.slot-frame::after{border:4px solid var(--teal);transform:translate(-8px,-8px)}
.slot-filled .slot-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.slot-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px;text-align:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%231C1A17' fill-opacity='.13'/%3E%3C/svg%3E");
}
.slot-inner svg{width:46px;height:46px}
.slot-label{font:700 .8rem/1.4 var(--type-head);text-transform:uppercase;letter-spacing:.08em}
.slot-spec{font:400 .78rem/1.4 var(--type-head);color:var(--ink-soft)}
.slot figcaption{margin-top:26px;font:400 .78rem/1.5 var(--type-head);color:var(--ink-soft)}

/* ---------- section heads ---------- */
.band{padding:clamp(56px,7vw,96px) 0}
.band-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,4vw,44px);flex-wrap:wrap}
.band-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);--plate-a:var(--ink);--plate-b:var(--yolk)}
.band-head p{margin:0;max-width:30em;color:var(--ink-soft)}

/* ---------- home: four category plates ---------- */
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);list-style:none;margin:0;padding:0}
.plate{
  position:relative;display:flex;flex-direction:column;
  border:2px solid var(--ink);background:var(--stock);
  transition:transform .3s ease,box-shadow .3s ease;
}
.plate:hover,.plate:focus-within{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.plate-top{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:190px;padding:18px 18px 22px;
  display:flex;flex-direction:column;justify-content:space-between;
  border-bottom:2px solid var(--ink);
  background:var(--plate-bg);color:var(--plate-a);
}
/* halftone blob in the corner of each plate */
.plate-top::before{
  content:"";position:absolute;right:-46px;top:-40px;width:170px;height:170px;border-radius:50%;z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Ccircle cx='4.5' cy='4.5' r='2' fill='%231C1A17' fill-opacity='.28'/%3E%3C/svg%3E");
}
.plate-num{font:700 .8rem/1 var(--type-head);letter-spacing:.1em}
.plate h3{font-size:clamp(1.6rem,2.4vw,2.15rem);line-height:1.02}
.plate h3 .rz{--slip:.07em;--slip-y:.05em}
.plate:hover h3 .rz::after,.plate:focus-within h3 .rz::after{transform:translate(.14em,.1em)}
.plate-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.plate-body p{margin:0;font-size:.97rem;line-height:1.6}
.plate-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:14px;border-top:1px dashed var(--ink)}
.count{font:700 .76rem/1 var(--type-head);text-transform:uppercase;letter-spacing:.07em}
.plate-link{font:700 .82rem/1.2 var(--type-head);text-underline-offset:4px;text-decoration-thickness:2px}
.plate-link::before{content:"";position:absolute;inset:0}
.plate-link:hover{text-decoration-color:var(--pink)}

.t-art{--plate-bg:var(--pink);--plate-a:var(--ink);--plate-b:var(--violet);--accent:var(--pink)}
.t-capsule{--plate-bg:var(--teal);--plate-a:var(--ink);--plate-b:var(--yolk);--accent:var(--teal)}
/* on the home plates, pale type rides over a darker ghost plate */
.plate.t-art .plate-top,.plate.t-capsule .plate-top{--plate-a:var(--stock)}
.plate.t-capsule .plate-top{--plate-b:var(--pink)}
.t-casino{--plate-bg:var(--yolk);--plate-a:var(--ink);--plate-b:var(--pink);--accent:var(--yolk)}
.t-ice{--plate-bg:var(--violet);--plate-a:var(--stock);--plate-b:var(--pink);--accent:var(--violet)}

/* ---------- home: how the index works ---------- */
.method{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--stock-deep)}
.method-in{display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.method h2{font-size:clamp(1.35rem,2.2vw,1.7rem);--plate-a:var(--ink);--plate-b:var(--teal)}
.note h3{display:flex;align-items:center;gap:12px;font-size:1rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em}
.note-mark{position:relative;width:30px;height:30px;flex:none;display:grid;place-items:center;font:700 .82rem var(--type-head);color:var(--stock)}
.note-mark::before,.note-mark::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1}
.note-mark{isolation:isolate}
.note-mark::before{background:var(--m1)}
.note-mark::after{background:var(--m2);transform:translate(3px,3px);mix-blend-mode:multiply;z-index:-2}
.note p{margin:0;font-size:.97rem;color:var(--ink-soft)}

/* ---------- category page head ---------- */
.cat-head{position:relative;padding:clamp(44px,6vw,80px) 0 clamp(34px,4vw,52px)}
.trail{margin:0 0 22px;font:400 .78rem/1.4 var(--type-head);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
.trail a{text-underline-offset:3px}
.cat-head h1{font-size:clamp(2.5rem,6vw,4.6rem)}
.cat-head .lede{margin:20px 0 0;max-width:38em;font-size:clamp(1.05rem,1.5vw,1.18rem);color:var(--ink-soft)}
.cat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip-row a{display:inline-block;padding:6px 11px;border:1.5px solid var(--ink);font:700 .74rem/1.2 var(--type-head);text-decoration:none;background:var(--stock)}
.chip-row a:hover{background:var(--accent);color:var(--plate-a)}
.double-rule{position:relative;height:12px;margin:0}
.double-rule::before,.double-rule::after{content:"";position:absolute;left:0;right:0;height:5px}
.double-rule::before{top:0;background:var(--accent)}
.double-rule::after{top:5px;left:10px;right:-10px;background:var(--plate-b);mix-blend-mode:multiply}
.page-slot{padding:clamp(8px,2vw,20px) 0 clamp(30px,4vw,48px)}
.page-slot .slot{max-width:880px}
.page-slot .slot-frame{aspect-ratio:16/7}

/* ---------- hotel entries ---------- */
.entries{padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,110px)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);list-style:none;margin:0;padding:0}
.cards > li:last-child:nth-child(odd){grid-column:1 / -1}
.card{height:100%;border:1.5px solid var(--ink);background:var(--stock);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
/* entry-number tag: the only riso accent on a card */
.tag-no{position:relative;isolation:isolate;display:inline-block;padding:7px 12px 6px;font:700 .8rem/1 var(--type-head);letter-spacing:.08em;color:var(--plate-a)}
.tag-no::before,.tag-no::after{content:"";position:absolute;inset:0}
.tag-no::before{background:var(--accent);z-index:-1}
.tag-no::after{background:var(--plate-b);transform:translate(5px,4px);mix-blend-mode:multiply;z-index:-2}
.where{font:400 .78rem/1.3 var(--type-head);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.card h2{font-size:clamp(1.35rem,2.1vw,1.7rem);margin-bottom:16px}
.card p{font-size:1rem}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:auto 0 0;padding:18px 0 0;border-top:1px dashed var(--ink)}
.facts li{padding:5px 10px;border:1.5px solid var(--ink);font:400 .74rem/1.2 var(--type-head);border-radius:2px}
.aside-note{margin-top:clamp(26px,3vw,40px);padding:20px 22px;border:1.5px dashed var(--ink);max-width:760px;font-size:.97rem;color:var(--ink-soft)}
.aside-note strong{font-family:var(--type-head);color:var(--ink)}

.next-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0}
.next-cats a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border:2px solid var(--ink);text-decoration:none;font:700 .86rem var(--type-head);background:var(--stock);position:relative}
.next-cats a::after{content:"→"}
.next-cats a:hover{background:var(--accent);color:var(--plate-a)}

/* ---------- plain text pages ---------- */
.prose-page{padding:clamp(44px,6vw,80px) 0 clamp(64px,8vw,110px)}
.prose-page h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:26px}
.prose{max-width:44em}
.prose h2{font-size:1.2rem;margin:2em 0 .7em}
.prose .updated{font:400 .8rem var(--type-head);color:var(--ink-soft)}
.prose a{text-underline-offset:3px}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--ink);color:var(--stock);margin-top:0}
.foot-rule{position:relative;height:10px;background:var(--stock)}
.foot-rule::before,.foot-rule::after{content:"";position:absolute;left:0;right:0;height:4px}
.foot-rule::before{top:3px;background:var(--pink)}
.foot-rule::after{top:6px;left:14px;right:-14px;background:var(--teal);mix-blend-mode:multiply}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);padding:clamp(44px,5vw,64px) 0 36px}
.foot .logo{color:var(--stock)}
.foot .logo small{color:#B9B3A6}
.foot .logo-dot::after{mix-blend-mode:screen}
.foot-about{margin:18px 0 0;max-width:30em;color:#CFC9BC;font-size:.95rem}
.foot h2{font:700 .76rem/1 var(--type-head);text-transform:uppercase;letter-spacing:.1em;color:var(--yolk);margin:6px 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--stock);font-size:.95rem}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:4px;text-decoration-thickness:2px}
.foot-close{border-top:1px solid #3C3833;padding:20px 0 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:400 .76rem/1.5 var(--type-head);color:#B9B3A6}

/* ---------- 404 ---------- */
.lost{padding:clamp(70px,10vw,140px) 0;text-align:left}
.lost h1{font-size:clamp(3rem,10vw,7rem);--plate-a:var(--violet);--plate-b:var(--yolk)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .method-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .method-in > h2{grid-column:1 / -1}
}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;padding:8px var(--side) 18px;
    background:var(--stock);border-bottom:2px solid var(--ink);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;font-size:.9rem;width:100%}
  .nav a::before{bottom:6px;right:auto;width:64px}
  .nav a::after{bottom:3px;right:auto;width:64px}
  .hero-grid{grid-template-columns:1fr}
  .hero .crop{display:none}
  .slot{margin-right:12px}
  .cards{grid-template-columns:1fr}
  .next-cats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1 / -1}
}
@media (max-width:560px){
  body{font-size:1rem}
  .plates{grid-template-columns:1fr}
  .plate-top{min-height:150px}
  .method-in{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .colour-bar i{width:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}
.cards > li:last-child:nth-child(odd) .card p{max-width:72ch}