/* =============================================================================
   styles.css - Portfolio templates, the gallery's world
   -----------------------------------------------------------------------------
   One fixed-height sheet on the desk: a slim template rail on the left, the
   selected template running live on the right. The page itself never scrolls.
   Materials: assets/plates/desk-wood.png and assets/plates/paper-stock.png.
   ========================================================================== */

:root{
  --paper:#f7f1e2; --paper-edge:#ecdfc4; --rule:#d3e2d5; --green:#2e6a4e; --green-soft:#e4efe5;
  --ink:#2b2a24; --graphite:#6f6a5d; --red:#c2352b; --wood:#8a5f3a; --wood-deep:#6b4423;
  --tape:rgba(222,203,158,.8);
}

*{box-sizing:border-box}

html,body{height:100%;margin:0;padding:0}

body{
  overflow:hidden;
  font-family:"Bricolage Grotesque",system-ui,sans-serif; color:var(--ink);
  background:var(--wood-deep); -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

::selection{background:rgba(194,53,43,.2);color:var(--ink)}
input{caret-color:var(--red)}

.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--paper);color:var(--ink);
  padding:10px 14px;border-radius:0 0 3px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── the desk: one fixed sheet, 20px of wood on every side ──────────────── */
.desk{
  position:relative; display:flex; flex-direction:column;
  height:100vh; height:100dvh; min-height:0; padding:20px; overflow:hidden;
  background-image:
    linear-gradient(180deg, rgba(43,25,8,0) 0%, rgba(43,25,8,0) 6%, rgba(43,25,8,.42) 100%),
    url("assets/plates/desk-wood.png");
  background-repeat:no-repeat, repeat;
  background-size:auto, 288px 48px;
}

.book{
  position:relative; display:flex; flex-direction:column; flex:1; min-height:0;
  background-image:url("assets/plates/paper-stock.png");
  background-size:544px 280px;
  border-radius:3px;
  box-shadow:0 34px 60px -32px rgba(18,9,2,.95), inset 0 0 0 1px rgba(87,64,32,.16);
}

/* ── head: title, find, count ───────────────────────────────────────────── */
.head{
  display:flex; align-items:flex-end; gap:clamp(18px,2.2vw,32px);
  flex:0 0 auto; padding:16px clamp(20px,2.3vw,32px) 13px;
  border-bottom:3px solid var(--green);
}
.head-title{flex:0 1 auto;min-width:0}
.head h1{margin:0;font-size:clamp(36px,3.1vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1}
.head .sub{margin:3px 0 0;font-size:14px;font-weight:600;letter-spacing:.012em;line-height:1.25;color:var(--green)}

.find{flex:0 1 250px;min-width:170px;margin-left:auto;padding-bottom:3px}
.find label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.find input{
  width:100%; border:0; border-bottom:1.5px solid #cfc4a8; background:transparent;
  font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  padding:3px 2px 4px; outline:none;
}
.find input::placeholder{color:var(--graphite);font-weight:500}

.head-count{margin-left:clamp(8px,1vw,18px);text-align:right;padding-bottom:1px;flex:0 0 auto}
.head-count .tally{display:flex;gap:7px;justify-content:flex-end;margin-bottom:6px;flex-wrap:wrap}
.head-count .tally .g{display:flex;gap:2px}
.head-count .tally i{display:block;width:2.5px;height:14px;background:var(--red);border-radius:2px}
.head-count .tally .g i:nth-child(5n){width:2px;transform:rotate(24deg) translateY(-1px)}
.head-count b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.head-count .count-sub{display:block;margin-top:2px;font-size:12px;color:var(--graphite)}

/* ── the leaves: slim rail + wide work leaf ─────────────────────────────── */
.leaves{flex:1;display:flex;min-height:0;overflow:hidden}
.leaf{padding:16px 22px 14px 34px;position:relative;min-height:0}
.leaf::before{content:"";position:absolute;left:16px;top:12px;bottom:12px;width:2px;background:rgba(194,53,43,.45)}
.gutter{flex:0 0 20px;background:linear-gradient(90deg,rgba(60,42,18,.16),rgba(60,42,18,.02) 45%,rgba(60,42,18,.16))}
.leaf.list{flex:0 0 clamp(330px,27vw,390px);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.leaf.work{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-left:1px solid #ded2b4;padding:16px 24px 14px 30px}

/* sections index */
.index{flex:0 0 auto;padding:0 0 12px;border-bottom:1.5px solid var(--rule)}
.index b{display:block;margin-bottom:5px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:0 12px}
.chips button{
  appearance:none;border:0;background:none;padding:3px 0;margin:0;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.35;
  text-transform:uppercase;color:var(--graphite);text-align:left;
}
.chips button:hover{color:var(--ink)}
.chips button.on{color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* section bar and rows */
.secs{
  flex:1 1 auto;min-height:0;overflow:auto;
  scroll-padding-top:34px;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(111,106,93,.42) transparent;
}
.secs::-webkit-scrollbar{width:8px}
.secs::-webkit-scrollbar-track{background:transparent}
.secs::-webkit-scrollbar-thumb{background:rgba(111,106,93,.36);border-radius:3px;border:2px solid transparent;background-clip:content-box}
.sec[hidden],.row[hidden],.nonote[hidden],.more[hidden]{display:none!important}
.sec:first-child{margin-top:11px}
.sec+.sec{margin-top:12px}
.sec-bar{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:12px;background:var(--green-soft);
  border-left:4px solid var(--green);padding:4px 9px;border-radius:2px}
.sec-bar h2{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.sec-bar span{margin-left:auto;font-size:11px;font-weight:600;color:#4c6b55;white-space:nowrap}

.row{display:grid;grid-template-columns:34px minmax(0,1fr) 50px;align-items:baseline;gap:8px;
  padding:8px 6px 8px 10px;min-height:56px;border-bottom:1px solid var(--rule);
  scroll-margin-top:34px;
  color:inherit;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.row:hover{background:rgba(46,106,78,.055)}
.row .no{font-size:12.5px;font-weight:700;color:var(--graphite)}
.row b{font-size:16.5px;font-weight:700;letter-spacing:-.012em;line-height:1.18}
.row span.line{display:block;margin-top:2px;font-size:12.5px;line-height:1.32;color:var(--graphite)}
.row.now b{color:var(--red);text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:5px}
.check{position:relative;width:18px;height:18px;display:inline-block;align-self:center;justify-self:end}
.check::before{content:"";position:absolute;left:1px;top:4px;width:15px;height:8px;
  border-left:3.5px solid var(--red);border-bottom:3.5px solid var(--red);transform:rotate(-45deg);border-radius:2px}
@keyframes check-draw{from{transform:rotate(-45deg) scale(0)}to{transform:rotate(-45deg) scale(1)}}
.row.now .check::before{animation:check-draw .26s cubic-bezier(.2,.8,.2,1)}
.row .ghost-mark{font-size:11px;color:var(--graphite);letter-spacing:.05em;white-space:nowrap}
.more,.nonote{margin:10px 0 0;font-family:"Caveat",cursive;font-size:17px;line-height:1.3;color:var(--graphite);text-wrap:balance}
.nonote{margin-top:8px}

/* ── work leaf: preview + the two equal actions ────────────────────────── */
.work-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.work-id{flex:1 1 210px;min-width:0;padding-top:2px}
.work-id h2{margin:0;font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.02;overflow-wrap:break-word}
.meta{margin:5px 0 0;font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;line-height:1.35;color:var(--graphite)}
.acts{flex:0 0 auto;display:flex;gap:10px;align-items:stretch}
.act{
  width:186px;min-height:54px;padding:8px 13px;display:flex;flex-direction:column;justify-content:center;
  border-radius:3px;font-family:inherit;text-align:left;text-decoration:none;line-height:1.08;cursor:pointer;
}
.act-label{display:block;font-size:16px;font-weight:800;letter-spacing:-.015em}
.act-sub{display:block;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;opacity:.92}
.take{border:0;background:var(--red);color:#fff;box-shadow:0 12px 20px -14px rgba(120,26,18,.8);transition:background-color .15s ease}
.take:hover{background:#a92b23}
.take:active{transform:translateY(1px)}
.take[disabled]{cursor:progress;opacity:.78}
.alt{border:1.5px solid var(--green);background:rgba(247,241,226,.35);color:var(--green);box-shadow:none;transition:background-color .15s ease}
.alt:hover{background:var(--green-soft)}
.alt .act-sub{opacity:.82}

.desc{margin:9px 0 9px;font-size:14px;line-height:1.38;color:#4d4738;max-width:78ch;flex:0 0 auto}

.print{
  position:relative;flex:1 1 0;min-height:150px;margin:18px 0 0;padding:9px 9px 12px;
  display:flex;flex-direction:column;background:#fffdf6;transform:rotate(-.35deg);
  box-shadow:0 14px 24px -16px rgba(45,30,10,.55), inset 0 0 0 1px rgba(60,42,18,.12);
}
.print iframe{display:block;flex:1 1 0;width:100%;min-height:0;border:0;background:#fff}
.print.swap{animation:pin-swap .34s cubic-bezier(.2,.8,.2,1)}
@keyframes pin-swap{from{opacity:.35;transform:rotate(-.35deg) translateY(-6px)}to{opacity:1;transform:rotate(-.35deg) translateY(0)}}
.tape{position:absolute;width:88px;height:23px;background:var(--tape);opacity:.9;
  box-shadow:inset 0 0 0 1px rgba(120,95,50,.18);pointer-events:none}
.tape.t1{left:-18px;top:-6px;transform:rotate(-38deg)}
.tape.t2{right:-19px;top:-5px;transform:rotate(41deg)}

.work-foot{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:3px 18px;flex-wrap:wrap;margin-top:9px}
.copy-hint{margin:0;font-size:12px;line-height:1.35;color:var(--graphite);max-width:70ch}
.copy-hint.ok{color:var(--green);font-weight:600}
.copy-hint.warn{color:var(--red);font-weight:600}
.fine{margin:0;font-size:12px;line-height:1.4;color:var(--graphite);white-space:nowrap}
.fine a{color:var(--red);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;font-weight:600}

/* ── states ─────────────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:3px}
.row:focus-visible{outline-offset:-2px}
.chips button:focus-visible,.fine a:focus-visible,.alt:focus-visible{outline-offset:3px}
.work-id h2:focus{outline:none}
.work-id h2:focus-visible{outline:2.5px solid var(--green);outline-offset:3px}

/* ── the mobile view switch (hidden on the spread) ─────────────────────── */
.switch{display:none}

/* ── short laptops: same composition, tighter furniture ────────────────── */
@media (max-height: 820px) and (min-width: 901px){
  .desk{padding:14px}
  .head{padding:11px 26px 10px}
  .head h1{font-size:36px}
  .head .sub{font-size:13px}
  .leaf{padding-top:11px;padding-bottom:10px}
  .index{padding-bottom:8px}
  .chips button{padding:2px 0;font-size:11px}
  .sec:first-child{margin-top:8px}
  .row{min-height:49px;padding:6px 5px 6px 9px}
  .row b{font-size:15.5px}
  .row span.line{font-size:12px}
  .leaf.work{padding-top:11px;padding-bottom:10px}
  .work-id h2{font-size:27px}
  .meta{font-size:12px}
  .act{width:172px;min-height:48px;padding:7px 12px}
  .act-label{font-size:14.5px}
  .desc{margin:7px 0;font-size:13px}
  .print{padding:7px 7px 10px}
  .tape{width:72px;height:20px}
  .work-foot{margin-top:7px}
  .copy-hint{font-size:12px}
}

@media (max-height: 660px) and (min-width: 901px){
  .head .sub{display:none}
  .head-count .tally{display:none}
  .head h1{font-size:32px}
  .leaf.work .desc{display:none}
  .work-id h2{font-size:24px}
  .sec-bar{padding:3px 8px}
  .row{min-height:44px}
  .row span.line{display:none}
  .more{font-size:15px;margin-top:6px}
}

/* keep all five rows in the rail on narrower laptops */
@media (max-width: 1150px) and (min-width: 901px){
  .head{gap:20px}
  .find{flex-basis:220px}
  .head-count .tally{display:none}
  .row .ghost-mark{display:none}
  .row{grid-template-columns:30px minmax(0,1fr) 18px}
}

/* narrow laptops: give the title its own line, keep the actions equal */
@media (max-width: 1023px) and (min-width: 901px){
  .work-head{flex-wrap:wrap;gap:8px}
  .work-id{flex:1 1 100%}
  .acts{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .act{width:auto}
}

/* ── phones and small tablets: one pane at a time, no page scroll ──────── */
@media (max-width: 900px){
  .desk{padding:8px}
  .book{border-radius:2px}

  .head{flex-wrap:wrap;align-items:flex-start;gap:8px 14px;padding:12px 14px 10px}
  .head-title{flex:1 1 100%}
  .head h1{font-size:30px}
  .head .sub{font-size:13px}
  .find{flex:1 1 150px;min-width:0;margin-left:0;padding-bottom:0}
  .find label{display:none}
  .find input{font-size:14px;padding:3px 1px 4px}
  .head-count{margin-left:auto;padding-bottom:2px}
  .head-count .tally,.head-count .count-sub{display:none}
  .head-count b{font-size:12px;letter-spacing:.035em;color:var(--graphite);white-space:nowrap}

  .switch{display:flex;flex:0 0 auto;gap:2px;padding:0 14px;border-bottom:1.5px solid var(--rule)}
  .switch-btn{
    appearance:none;border:0;background:none;font-family:inherit;cursor:pointer;
    padding:8px 12px 7px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--graphite);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
  }
  .switch-btn.on{color:var(--red);border-bottom-color:var(--red)}

  .leaves{flex:1;flex-direction:column;min-height:0;overflow:hidden}
  .gutter{display:none}
  .leaf{flex:1 1 auto;width:auto;min-height:0;padding:12px 14px 11px 22px}
  .leaf::before{left:7px;top:9px;bottom:9px}
  .leaf.list{flex:1 1 auto;padding-right:12px}
  .leaf.work{flex:1 1 auto;border-left:0;border-top:0;padding:12px 12px 10px 22px}
  .book[data-view="list"] .leaf.work{display:none}
  .book[data-view="work"] .leaf.list{display:none}

  .index{padding-bottom:8px}
  .index b{font-size:11px;margin-bottom:3px}
  .chips{gap:0 11px}
  .chips button{font-size:11px;padding:4px 0}
  .sec:first-child{margin-top:8px}
  .secs{scrollbar-gutter:auto}
  .sec-bar{padding:4px 8px}
  .sec-bar h2{font-size:11px;letter-spacing:.1em}
  .sec-bar span{font-size:11px}
  .row{grid-template-columns:26px minmax(0,1fr) 16px;gap:7px;min-height:50px;padding:7px 3px 7px 7px}
  .row .no{font-size:11px}
  .row b{font-size:15px}
  .row span.line{font-size:12px}
  .row .ghost-mark{display:none}
  .check{width:16px;height:16px}
  .check::before{left:0;top:3px;width:14px;height:7px;border-left-width:3px;border-bottom-width:3px} /* impeccable-disable-line side-tab: drawn check stroke, not a card edge */
  .more{font-size:15px;margin-top:7px}

  .work-head{gap:8px 12px;flex-wrap:wrap;padding-bottom:0}
  .work-id{flex:1 1 100%;padding-top:0}
  .work-id h2{font-size:24px}
  .meta{font-size:12px;letter-spacing:.06em;white-space:normal}
  .acts{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
  .act{width:auto;min-width:0;min-height:50px;padding:7px 10px}
  .act-label{font-size:13.5px}
  .act-sub{font-size:11px;letter-spacing:.06em;margin-top:2px}
  .leaf.work .desc{display:none}
  .print{min-height:90px;padding:6px 6px 9px;margin-top:2px;transform:none}
  .print.swap{animation:none}
  .tape{display:none}
  .work-foot{margin-top:7px;gap:2px}
  .copy-hint{font-size:12px;line-height:1.3}
  .fine{font-size:12px}
}

@media (max-width: 900px) and (max-height: 700px){
  .leaf.list{padding-top:9px;padding-bottom:9px}
  .index{padding-bottom:6px}
  .chips button{padding:3px 0;font-size:11px}
  .sec:first-child{margin-top:7px}
  .sec-bar{padding:3px 8px}
  .row{min-height:45px;padding:5px 3px 5px 7px}
  .row span.line{font-size:12px;line-height:1.26}
}

/* the smallest phones: keep the names visible, drop the supporting line and meta */
@media (max-width: 340px) and (max-height: 620px){
  .row span.line{display:none}
  .meta{display:none}
}

@media (max-width: 340px){
  .act{padding:7px 8px}
  .act-label{font-size:12.5px}
  .act-sub{font-size:11px;letter-spacing:.04em}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}