/* ============================================================
   TRYKKERIET — T.K. Bars' visuelle signatur-system
   Tre primitiver, som alt andet bygges af:
     · SKÆREMÆRKERNE   4 hjørne-vinkler. Sitets universelle ramme.
     · BLÆKFLOWET      oxblood skyller ind, skriften slås ud i papir.
     · RYGGEN          den lodrette oxblood-ryg. Sitets anker.
   Ren CSS. Ingen JS, ingen libs, ingen nye fonte.
   Byg-fil: src/css/trykkeriet.css
   ============================================================ */

:root{
  --tk-red:#C1121F;
  --tk-red-dyb:#8E0D17;        /* trykket · blækket der har sat sig */
  --tk-paper:#f3ecdc;          /* knock-out-farven. Sættes pr. flade. */
  --tk-ease:cubic-bezier(.16,.84,.24,1);
}

/* ------------------------------------------------------------
   SKÆREMÆRKERNE — brandets geometri. Ligger uden på klikfladen,
   trækker sig ind når du rører. Bruges også om billeder og digte.
   ------------------------------------------------------------ */
.tk-mk{ position:absolute; width:13px; height:13px; pointer-events:none; z-index:3;
  transition:inset .34s var(--tk-ease), border-color .24s ease, width .34s var(--tk-ease), height .34s var(--tk-ease); }
.tk-mk--tl{ top:-11px; left:-11px; border-top:1px solid currentColor; border-left:1px solid currentColor; }
.tk-mk--tr{ top:-11px; right:-11px; border-top:1px solid currentColor; border-right:1px solid currentColor; }
.tk-mk--bl{ bottom:-11px; left:-11px; border-bottom:1px solid currentColor; border-left:1px solid currentColor; }
.tk-mk--br{ bottom:-11px; right:-11px; border-bottom:1px solid currentColor; border-right:1px solid currentColor; }
.tk-mk{ opacity:.42; }

/* ------------------------------------------------------------
   1 · TRYKKNAPPEN — den primære. Skæremærker om et frit ord.
   Ved berøring: mærkerne snapper ind, blækket skyller op skævt
   som en rakle, skriften slås ud i papirfarven.
   ------------------------------------------------------------ */
.tk-tryk{
  position:relative; display:inline-flex; isolation:isolate;
  text-decoration:none; color:inherit; min-height:58px;
  padding:20px clamp(24px,3vw,38px) 19px; align-items:baseline;
  gap:clamp(16px,2.4vw,34px);
}
.tk-tryk__ink{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.tk-tryk__ink::before{
  content:""; position:absolute; left:-4%; width:108%; top:-12%; height:124%;
  background:var(--tk-red);
  /* skewY om venstre-bund løfter den fjerne kant (bredde × tan 2,4°) — det ekstra
     skub på 60 px holder forkanten uden for klip-boksen ved enhver knap-bredde. */
  transform:translateY(101%) translateY(60px) skewY(-2.4deg);
  transform-origin:left bottom; transition:transform .42s var(--tk-ease);
}
.tk-tryk__lbl{
  position:relative; z-index:2; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500; font-size:clamp(24px,2.6vw,34px); line-height:1; letter-spacing:-.01em;
  white-space:nowrap; transition:color .2s ease .06s;
}
.tk-tryk__no{
  position:relative; z-index:2; margin-left:auto; font-family:"Space Mono",ui-monospace,monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; white-space:nowrap;
  transition:color .2s ease .06s, opacity .2s ease;
}
.tk-tryk:hover .tk-tryk__ink::before, .tk-tryk.is-hover .tk-tryk__ink::before,
.tk-tryk:focus-visible .tk-tryk__ink::before, .tk-tryk.is-focus .tk-tryk__ink::before{ transform:translateY(0) skewY(0deg); }
.tk-tryk:hover .tk-tryk__lbl, .tk-tryk.is-hover .tk-tryk__lbl,
.tk-tryk:hover .tk-tryk__no, .tk-tryk.is-hover .tk-tryk__no,
.tk-tryk:focus-visible .tk-tryk__lbl, .tk-tryk.is-focus .tk-tryk__lbl,
.tk-tryk:focus-visible .tk-tryk__no, .tk-tryk.is-focus .tk-tryk__no{ color:var(--tk-paper); }
.tk-tryk:hover .tk-tryk__no, .tk-tryk.is-hover .tk-tryk__no{ opacity:.8; }
.tk-tryk:hover .tk-mk, .tk-tryk.is-hover .tk-mk,
.tk-tryk:focus-visible .tk-mk, .tk-tryk.is-focus .tk-mk{ inset:auto; opacity:1; color:var(--tk-red); width:17px; height:17px; }
.tk-tryk:hover .tk-mk--tl, .tk-tryk.is-hover .tk-mk--tl, .tk-tryk:focus-visible .tk-mk--tl, .tk-tryk.is-focus .tk-mk--tl{ top:-4px; left:-4px; }
.tk-tryk:hover .tk-mk--tr, .tk-tryk.is-hover .tk-mk--tr, .tk-tryk:focus-visible .tk-mk--tr, .tk-tryk.is-focus .tk-mk--tr{ top:-4px; right:-4px; }
.tk-tryk:hover .tk-mk--bl, .tk-tryk.is-hover .tk-mk--bl, .tk-tryk:focus-visible .tk-mk--bl, .tk-tryk.is-focus .tk-mk--bl{ bottom:-4px; left:-4px; }
.tk-tryk:hover .tk-mk--br, .tk-tryk.is-hover .tk-mk--br, .tk-tryk:focus-visible .tk-mk--br, .tk-tryk.is-focus .tk-mk--br{ bottom:-4px; right:-4px; }
.tk-tryk:focus-visible{ outline:none; }
.tk-tryk:focus-visible .tk-mk, .tk-tryk.is-focus .tk-mk{ border-style:solid; }
.tk-tryk:active .tk-tryk__ink::before, .tk-tryk.is-active .tk-tryk__ink::before{ background:var(--tk-red-dyb); transform:translateY(0) skewY(0deg); }
.tk-tryk:active .tk-tryk__lbl, .tk-tryk.is-active .tk-tryk__lbl{ color:var(--tk-paper); transform:translateY(1px); }

/* stille variant — samme sprog, halv stemme */
.tk-tryk--lav{ min-height:44px; padding:12px 18px 11px; }
.tk-tryk--lav .tk-tryk__lbl{ font-size:15px; font-family:"Space Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
.tk-tryk--lav .tk-mk{ width:9px; height:9px; }

/* ------------------------------------------------------------
   2 · REGISTERLINJEN — "videre". Arkiv-tal som ornament, navnet
   i plakat-serif. Ved berøring skyller blækket hen over HELE
   arkets bredde (fuld udfald) og alt slås ud i papir.
   Forælder skal have position:relative + overflow:hidden.
   ------------------------------------------------------------ */
.tk-reg{ margin:0; padding:0; border-top:1px solid color-mix(in srgb, currentColor 16%, transparent); }
.tk-reg__ra{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:0 clamp(18px,3vw,40px); isolation:isolate;
  padding:clamp(16px,2vw,22px) 0; min-height:56px;
  text-decoration:none; color:inherit;
  border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.tk-reg__ink{
  position:absolute; top:0; bottom:-1px; left:calc(-1 * var(--tk-bleed,32px)); right:calc(-1 * var(--tk-bleed,32px));
  background:var(--tk-red); z-index:0; transform:scaleX(0); transform-origin:left center;
  transition:transform .46s var(--tk-ease);
}
.tk-reg__tal{
  position:relative; z-index:1; font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(38px,5vw,64px); line-height:.86; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums; opacity:.28;
  transition:color .22s ease .05s, opacity .22s ease;
}
.tk-reg__txt{ position:relative; z-index:1; min-width:0; }
.tk-reg__ord{
  display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:clamp(26px,3vw,38px); line-height:1.02; letter-spacing:-.015em;
  transition:color .22s ease .05s, transform .34s var(--tk-ease);
}
.tk-reg__und{
  display:block; margin-top:8px; font-family:"Space Mono",ui-monospace,monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; line-height:1.6;
  transition:color .22s ease .05s, opacity .22s ease, transform .34s var(--tk-ease);
}
.tk-reg__pil{
  position:relative; z-index:1; font-family:"Space Mono",ui-monospace,monospace; font-size:14px;
  line-height:1; opacity:.5; transition:color .22s ease .05s, opacity .22s ease, transform .34s var(--tk-ease);
}
.tk-reg__ra:hover, .tk-reg__ra.is-hover, .tk-reg__ra:focus-visible, .tk-reg__ra.is-focus{ outline:none; }
.tk-reg__ra:hover .tk-reg__ink, .tk-reg__ra.is-hover .tk-reg__ink,
.tk-reg__ra:focus-visible .tk-reg__ink, .tk-reg__ra.is-focus .tk-reg__ink{ transform:scaleX(1); }
.tk-reg__ra:hover .tk-reg__tal, .tk-reg__ra.is-hover .tk-reg__tal,
.tk-reg__ra:hover .tk-reg__ord, .tk-reg__ra.is-hover .tk-reg__ord,
.tk-reg__ra:hover .tk-reg__und, .tk-reg__ra.is-hover .tk-reg__und,
.tk-reg__ra:hover .tk-reg__pil, .tk-reg__ra.is-hover .tk-reg__pil,
.tk-reg__ra:focus-visible .tk-reg__tal, .tk-reg__ra.is-focus .tk-reg__tal,
.tk-reg__ra:focus-visible .tk-reg__ord, .tk-reg__ra.is-focus .tk-reg__ord,
.tk-reg__ra:focus-visible .tk-reg__und, .tk-reg__ra.is-focus .tk-reg__und,
.tk-reg__ra:focus-visible .tk-reg__pil, .tk-reg__ra.is-focus .tk-reg__pil{ color:var(--tk-paper); }
.tk-reg__ra:hover .tk-reg__tal, .tk-reg__ra.is-hover .tk-reg__tal,
.tk-reg__ra:focus-visible .tk-reg__tal, .tk-reg__ra.is-focus .tk-reg__tal{ opacity:.62; }
.tk-reg__ra:hover .tk-reg__und, .tk-reg__ra.is-hover .tk-reg__und{ opacity:.8; }
.tk-reg__ra:hover .tk-reg__pil, .tk-reg__ra.is-hover .tk-reg__pil{ opacity:1; transform:translateX(9px); }
.tk-reg__ra:hover .tk-reg__ord, .tk-reg__ra.is-hover .tk-reg__ord,
.tk-reg__ra:hover .tk-reg__und, .tk-reg__ra.is-hover .tk-reg__und{ transform:translateX(10px); }
.tk-reg__ra:focus-visible .tk-reg__ink, .tk-reg__ra.is-focus .tk-reg__ink{ box-shadow:inset 0 0 0 2px var(--tk-paper); }
.tk-reg__ra:active .tk-reg__ink, .tk-reg__ra.is-active .tk-reg__ink{ background:var(--tk-red-dyb); transform:scaleX(1); }

/* ------------------------------------------------------------
   3 · RYGGEN — "tilbage". Den mindeværdige. I hvile: en fed
   oxblood-ryg i venstre kant og ordet i kæmpe kursiv. Ved
   berøring folder ryggen sig ud til et fuldt bånd og ordet
   slås ud i papir. Som at træde ud på gulvet.
   ------------------------------------------------------------ */
.tk-ryg{
  position:relative; display:flex; align-items:stretch; isolation:isolate;
  text-decoration:none; color:inherit; min-height:96px; overflow:hidden;
}
.tk-ryg__spine{
  position:relative; z-index:2; flex:none; width:12px; background:var(--tk-red);
  transition:width .3s var(--tk-ease), background .24s ease;
}
.tk-ryg__ink{
  position:absolute; inset:0 0 0 12px; background:var(--tk-red); z-index:0;
  transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--tk-ease);
}
.tk-ryg__txt{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center;
  gap:10px; padding:16px clamp(20px,3vw,40px);
}
.tk-ryg__funk{
  font-family:"Space Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.5; line-height:1;
  transition:color .22s ease .05s, opacity .22s ease;
}
.tk-ryg__ord{
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(38px,6.4vw,72px); line-height:.94; letter-spacing:-.025em;
  transition:color .22s ease .06s, transform .34s var(--tk-ease);
}
.tk-ryg:hover .tk-ryg__ink, .tk-ryg.is-hover .tk-ryg__ink,
.tk-ryg:focus-visible .tk-ryg__ink, .tk-ryg.is-focus .tk-ryg__ink{ transform:scaleX(1); }
.tk-ryg:hover .tk-ryg__spine, .tk-ryg.is-hover .tk-ryg__spine,
.tk-ryg:focus-visible .tk-ryg__spine, .tk-ryg.is-focus .tk-ryg__spine{ width:20px; }
.tk-ryg:hover .tk-ryg__ord, .tk-ryg.is-hover .tk-ryg__ord,
.tk-ryg:hover .tk-ryg__funk, .tk-ryg.is-hover .tk-ryg__funk,
.tk-ryg:focus-visible .tk-ryg__ord, .tk-ryg.is-focus .tk-ryg__ord,
.tk-ryg:focus-visible .tk-ryg__funk, .tk-ryg.is-focus .tk-ryg__funk{ color:var(--tk-paper); }
.tk-ryg:hover .tk-ryg__funk, .tk-ryg.is-hover .tk-ryg__funk{ opacity:.75; }
.tk-ryg:hover .tk-ryg__ord, .tk-ryg.is-hover .tk-ryg__ord{ transform:translateX(-8px); }
.tk-ryg:focus-visible{ outline:none; }
.tk-ryg:focus-visible .tk-ryg__spine, .tk-ryg.is-focus .tk-ryg__spine{ background:var(--tk-red-dyb); }
.tk-ryg:active .tk-ryg__ink, .tk-ryg.is-active .tk-ryg__ink{ background:var(--tk-red-dyb); transform:scaleX(1); }
.tk-ryg:active .tk-ryg__ord, .tk-ryg.is-active .tk-ryg__ord{ color:var(--tk-paper); transform:translateX(-12px); }

/* ------------------------------------------------------------
   TALLET — arkiv-nummeret som ornament. Konturskrift, bløder
   ud over kanten. Ren grafik, ingen tekst der skal læses.
   ------------------------------------------------------------ */
.tk-tal-orn{
  position:absolute; pointer-events:none; user-select:none; z-index:0;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400; line-height:.72;
  font-size:clamp(140px,22vw,320px); letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, currentColor 20%, transparent);
}

/* ------------------------------------------------------------
   KOLOFONEN — koordinaten. Passiv, tynd, oxblood-firkant er dig.
   ------------------------------------------------------------ */
.tk-kolofon{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;
  font-family:"Space Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.tk-kolofon a{ color:inherit; text-decoration:none; opacity:.55; padding:6px 0 5px;
  border-bottom:1px solid transparent; transition:opacity .15s, border-color .15s; }
.tk-kolofon a:hover{ opacity:1; border-bottom-color:color-mix(in srgb, currentColor 34%, transparent); }
.tk-kolofon a:focus-visible{ outline:2px solid var(--tk-red); outline-offset:3px; }
.tk-kolofon__sep{ opacity:.28; }
.tk-kolofon__her{ display:flex; align-items:center; gap:8px; }
.tk-kolofon__her::before{ content:""; width:6px; height:6px; background:var(--tk-red); flex:none; }

/* ------------------------------------------------------------
   RESPONSIVT
   ------------------------------------------------------------ */
@media (max-width:640px){
  .tk-tryk{ width:100%; }
  .tk-tryk__lbl{ white-space:normal; font-size:22px; }
  .tk-reg__ra{ grid-template-columns:auto 1fr; row-gap:10px; }
  .tk-reg__pil{ grid-column:2; justify-self:end; }
  .tk-ryg{ min-height:84px; }
  .tk-ryg__ord{ font-size:34px; }
}

/* ------------------------------------------------------------
   REDUCED MOTION — blækket sættes, det skylles ikke.
   Alle tilstande består; kun bevægelsen forsvinder.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .tk-mk, .tk-tryk__ink::before, .tk-tryk__lbl, .tk-tryk__no,
  .tk-reg__ink, .tk-reg__tal, .tk-reg__ord, .tk-reg__und, .tk-reg__pil,
  .tk-ryg__ink, .tk-ryg__spine, .tk-ryg__ord, .tk-ryg__funk{ transition:none !important; }
  .tk-tryk__ink::before{ transform:translateY(101%) skewY(0deg); }
  .tk-tryk:active .tk-tryk__ink::before{ transform:translateY(0); }
  .tk-tryk:hover .tk-tryk__ink::before, .tk-tryk:focus-visible .tk-tryk__ink::before{ transform:translateY(0); }
  .tk-reg__ra:hover .tk-reg__ord, .tk-reg__ra:hover .tk-reg__und, .tk-reg__ra:hover .tk-reg__pil,
  .tk-ryg:hover .tk-ryg__ord, .tk-tryk:active .tk-tryk__lbl{ transform:none !important; }
}