/* Layout: a self-healing cutting mat. One narrow reading column laid on the mat, rulers on the edges,
   work pieces as paper cut-outs sitting on the grid. Single deliberate look (the mat is always green). */
:root{
  --mat:#2c5e4b;
  --mat-deep:#224c3c;
  --grid:rgba(226,236,196,.10);
  --grid-major:rgba(226,236,196,.26);
  --ink:#f2f0e3;
  --muted:#c2d3c1;
  --blade:#f6d04d;
  --paper:#f3f1e7;
  --paper-ink:#1c2923;
  --paper-muted:#5d6b63;
  --display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --cm:40px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--mat-deep)}
body{
  margin:0;
  background:var(--mat);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blade);outline-offset:3px;border-radius:2px}

/* ---------- the mat ---------- */
.mat{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background-color:var(--mat);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:calc(var(--cm)*5) calc(var(--cm)*5), calc(var(--cm)*5) calc(var(--cm)*5), var(--cm) var(--cm), var(--cm) var(--cm);
  background-position:28px 28px;
}
.mat::after{ /* subtle rubber texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:3px 3px;
}
.angles{position:absolute;right:-120px;top:120px;width:640px;height:640px;pointer-events:none;opacity:.55}
.angles line,.angles circle,.angles path{stroke:var(--grid-major);fill:none}
.angles text{fill:var(--grid-major);font-family:var(--mono);font-size:11px}

.ruler-top{
  position:relative;z-index:2;height:28px;
  border-bottom:1px solid var(--grid-major);
  background:
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 8px) left bottom/100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px var(--cm)) left bottom/100% 12px no-repeat;
  background-position:28px bottom, 28px bottom;
  overflow:hidden;white-space:nowrap;
  font:500 10px/1 var(--mono);color:var(--muted);letter-spacing:.02em;
}
.ruler-top span{position:absolute;top:5px;transform:translateX(-50%)}
.ruler-left{
  position:absolute;left:0;top:28px;bottom:0;width:28px;z-index:2;
  border-right:1px solid var(--grid-major);
  background:
    repeating-linear-gradient(180deg, var(--grid-major) 0 1px, transparent 1px 8px) right top/7px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px var(--cm)) right top/12px 100% no-repeat;
  font:500 10px/1 var(--mono);color:var(--muted);
}
.ruler-left span{position:absolute;left:3px;transform:translateY(-50%)}

/* ---------- sheet ---------- */
.sheet{
  position:relative;z-index:1;
  max-width:760px;margin:0 auto;
  padding-inline:44px;
  padding-block:72px 40px;
  display:flex;flex-direction:column;gap:96px;
}
.label{
  font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--blade);
  display:flex;align-items:center;gap:10px;
}
.label::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--grid-major) 0 6px,transparent 6px 10px)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:22px}
.hero-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font:500 12px/1.5 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.hero-meta b{color:var(--blade);font-weight:500}
.hero h1{grid-column:1/-1;font-size:clamp(36px, 6vw, 58px);line-height:1.02;letter-spacing:-.01em;margin-top:8px}
.hero h1 em{font-style:italic;color:var(--blade)}
.intro{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.intro p{margin:0}
.intro p + p{color:var(--muted)}
.intro a{text-decoration-color:var(--blade);text-underline-offset:3px}

/* work cut-outs */
.section{display:flex;flex-direction:column;gap:28px}
.section-head{display:flex;flex-direction:column;gap:14px}
.section-head h2{font-size:clamp(34px,5vw,46px);line-height:1.05}
.section-head p{margin:0;color:var(--muted)}
.pieces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.piece{
  position:relative;background:var(--paper);color:var(--paper-ink);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;min-width:0;
  box-shadow:0 1px 0 rgba(0,0,0,.18),0 10px 20px -14px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  transform:rotate(var(--tilt,0deg));
}
.piece:nth-child(odd){--tilt:-.6deg}
.piece:nth-child(even){--tilt:.5deg}
.piece.moved{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot2,0deg))}
.piece::before{ /* the blade line, drawn on hover */
  content:"";position:absolute;inset:-9px;pointer-events:none;
  border:1.5px dashed var(--blade);opacity:0;transition:opacity .25s;
}
.piece:hover:not(.moved),.piece:focus-within:not(.moved){transform:translateY(-4px) rotate(0);box-shadow:0 1px 0 rgba(0,0,0,.18),0 22px 30px -16px rgba(0,0,0,.65)}
.piece:hover::before,.piece:focus-within::before{opacity:1}
.piece .where{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted);display:flex;justify-content:space-between;gap:10px}
.piece h3{font-size:28px;line-height:1.08}
.piece p{margin:0;font-size:15.5px;line-height:1.55;color:#34423b}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.tags span{font:500 12px/1 var(--mono);padding:5px 7px;border:1px solid rgba(28,41,35,.22);color:var(--paper-muted)}
.more{align-self:flex-start;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-ink);text-decoration:none;background:var(--blade);padding:8px 10px;margin-top:4px}
.more span{display:inline-block;transition:transform .25s}
.more:hover span{transform:translateX(4px)}
.crop{position:absolute;width:10px;height:10px;border-color:var(--paper-muted);opacity:.55}
.crop.tl{top:6px;left:6px;border-top:1px solid;border-left:1px solid}
.crop.br{bottom:6px;right:6px;border-bottom:1px solid;border-right:1px solid}

/* contact */
.contact{display:flex;flex-direction:column;gap:26px}
.links{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:20px;border-top:1px solid var(--grid-major);font:italic 400 28px/1.2 var(--display);letter-spacing:0}
.links a{text-decoration-color:var(--grid-major);text-underline-offset:6px;text-decoration-thickness:1px}
.links a:hover{text-decoration-color:var(--blade);color:var(--blade)}
.copy{
  font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--blade);border:1px solid var(--blade);padding:6px 8px;cursor:pointer;
}
.copy:hover{background:var(--blade);color:var(--paper-ink)}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:400 12px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em}

/* ---------- interactions ---------- */
.rin{position:absolute;inset:0}
.ch{display:inline-block;transition:transform .5s cubic-bezier(.3,1.7,.5,1),color .25s}
.ch.lift{transform:translateY(-.14em) rotate(var(--rot,0deg));color:var(--blade)}
.hero h1 em .ch.lift{color:var(--ink)}
.word{display:inline-block;white-space:nowrap}
.hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:500 12px/1.4 var(--mono);color:var(--muted);letter-spacing:.04em}
.hint kbd{font:inherit;color:var(--paper-ink);background:var(--blade);padding:3px 6px;letter-spacing:.06em;text-transform:uppercase}
.hint button{font:inherit;background:none;border:1px dashed var(--grid-major);color:var(--muted);padding:4px 8px;cursor:pointer}
.hint button:hover{color:var(--blade);border-color:var(--blade)}
/* the cut-it-in-half game, under the board: its goal or result on the left, Tidy up on the right */
.board-game{flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}
.board-game .score{flex:1 1 0;min-width:0;padding-top:5px}
.board-game #tidy{flex:none}
.hint .score.done{color:var(--ink)}
.hint .score b{font-weight:600;color:var(--blade)}
#cuts{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.tick{position:absolute;background:var(--blade);pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
.tick.x{top:0;bottom:0;width:2px;left:0}
.tick.y{left:0;right:0;height:2px;top:0}
.mat.tracking .tick{opacity:1}
.readout{
  position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .2s;
  font:500 12px/1 var(--mono);color:var(--paper-ink);background:var(--blade);padding:4px 6px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mat.tracking .readout{opacity:1}
.mat.cutting{cursor:url("../images/ui/knife-cursor.png") 2 30, crosshair;user-select:none;-webkit-user-select:none}
.piece.draggable{cursor:grab}
.piece.dragging{transition:box-shadow .2s;cursor:grabbing;z-index:20;user-select:none;-webkit-user-select:none;box-shadow:0 1px 0 rgba(0,0,0,.18),0 30px 40px -18px rgba(0,0,0,.7)}
.piece.dragging::before{opacity:1}
.piece.moved{z-index:2}
.piece.settle{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:none),(pointer:coarse){.hint{display:none}}

/* load */
@keyframes lay{from{transform:translateY(10px) rotate(var(--r,0deg));opacity:.001}}
.hero > *{animation:lay .7s cubic-bezier(.2,.8,.2,1) both}
.hero > :nth-child(2){animation-delay:.06s}.hero > :nth-child(3){animation-delay:.12s}.hero > :nth-child(4){animation-delay:.18s}

@media (max-width:640px){
  body{font-size:16px}
  :root{--cm:32px}
  .ruler-left{display:none}
  .mat{background-position:0 28px}
  .ruler-top{background-position:0 bottom,0 bottom}
  .sheet{padding-inline:18px;padding-block:44px 32px;gap:72px}
  .hero{gap:18px}
  .pieces{grid-template-columns:1fr}
  .angles{width:420px;height:420px;right:-160px;top:60px;opacity:.4}
}
@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none!important;transition:none!important}
}

/* ---------- accessibility ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* yellow focus ring disappears on cream paper: use ink there */
.piece:focus-visible,.piece :focus-visible{outline-color:var(--paper-ink)}

/* ---------- language switch ---------- */
.lang{display:inline-flex;align-items:center;gap:2px;font:500 12px/1 var(--mono);letter-spacing:.08em}
.lang a{color:var(--muted);text-decoration:none;padding:6px 7px}
.lang a:hover{color:var(--blade)}
.lang a[aria-current="true"]{color:var(--paper-ink);background:var(--blade)}
.lang.float{position:fixed;top:36px;right:16px;z-index:40;background:var(--mat-deep);border:1px solid var(--grid-major);padding:3px}
@media (max-width:640px){.lang.float{top:34px;right:10px}}

/* ---------- work in progress: a red ink rubber stamp on the card ---------- */
.stamp{align-self:flex-start;margin-top:6px;transform:rotate(-4deg);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a3382a;border:1.5px solid currentColor;padding:7px 9px;border-radius:2px;opacity:.92}

/* cards without tags: keep the action pinned to the bottom so buttons line up across a row */
.piece .more,.piece .stamp{margin-top:auto}
.piece p{margin-bottom:8px}

/* every card the same height, set by the tallest one */
.pieces{grid-auto-rows:1fr}

/* ---------- paper fold on the cards ---------- */
/* --ear is the size of the folded top-right corner; registered so it can animate on hover */
@property --ear{syntax:'<length>';inherits:true;initial-value:22px}
.piece{
  --ear:22px;
  background:
    /* a soft crease where the sheet was once folded in half */
    linear-gradient(180deg,transparent calc(50% - 1px),rgba(28,41,35,.07) calc(50% - 1px) 50%,rgba(255,255,255,.6) 50% calc(50% + 1px),transparent calc(50% + 1px)),
    /* the two halves catch the light a little differently */
    linear-gradient(180deg,rgba(28,41,35,.025) 0 50%,rgba(255,255,255,.05) 50% 100%),
    /* the corner that folded over is cut away, so the mat shows through */
    linear-gradient(225deg,transparent calc(var(--ear) * .7071),var(--paper) 0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,--ear .3s cubic-bezier(.2,.8,.2,1);
}
.piece::after{
  /* the folded flap: underside of the paper, slightly darker, casting a small shadow */
  content:"";position:absolute;top:0;right:0;width:var(--ear);height:var(--ear);pointer-events:none;
  background:linear-gradient(225deg,transparent 50%,#d9d4c1 50%,#e7e2d1 72%,#f0ecdf 100%);
  box-shadow:-2px 2px 3px -1px rgba(0,0,0,.22);
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.piece:hover,.piece:focus-within{--ear:32px}
@media (prefers-reduced-motion:reduce){.piece{transition:none}}

/* ---------- cardboard you can slice ---------- */
.board{position:relative;height:134px;cursor:url("../images/ui/knife-cursor.png") 2 30, crosshair;touch-action:none}
/* the drawing bleeds well past the cardboard so cut pieces can drift without being cropped; clicks pass through it */
.board canvas{position:absolute;left:-120px;top:-120px;width:calc(100% + 240px);height:calc(100% + 240px);pointer-events:none}
@media (max-width:640px){.board{height:104px}}@media (hover:none),(pointer:coarse){.hint.board-hint,.hint.board-game{display:flex}}
/* breathing room: hint -> cardboard -> greeting */
.board{margin:24px 0 16px}  /* the greeting adds its own 8px on top, so both gaps come out at 46px */
/* a little air between the section intro and the card hint below it */
.section-head .hint{margin-top:10px}

.mat.can-cut{cursor:url("../images/ui/knife-cursor.png") 2 30, crosshair}

/* craft knife cursor wherever something can be cut: the cardboard, and empty mat (hotspot = blade tip) */
/* drawn knife cursor: follows the mouse wherever something can be cut; the real cursor is hidden there */
.knife{position:fixed;left:0;top:0;z-index:60;width:32px;height:32px;pointer-events:none;opacity:0;background:url("../images/ui/knife-cursor.png") 0 0/32px 32px no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.knife.on{opacity:1}
.js-knife .board,.js-knife .mat.can-cut,.js-knife .mat.cutting{cursor:none}