/* Golf Network News · The Bag Tag Wall.
   A pegboard of year columns; every player in every draw has a tag. Materials by era, all drawn here and in wall.js. */

@font-face{font-family:'GNN Serif';src:url(assets/fonts/gnn-serif-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'GNN Serif';src:url(assets/fonts/gnn-serif-italic-var.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Inter Display';src:url(assets/fonts/inter-display-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --soot:#0D0907;--board:#3B3027;--board-2:#2E251E;--brass:#C9A45C;--amber:#F3C98A;--cream:#EFE6D2;--paper:#F2EADA;--ink:#1E2333;--ink-2:#4A3A28;
  --serif:'GNN Serif',Georgia,'Times New Roman',serif;--sans:'Inter Display',Arial,Helvetica,sans-serif;
  --gut:clamp(16px,3vw,48px);
  /* championship enamel colours: one per championship, men's and women's alike */
  --c-the-amateur:#24503A;--c-womens-amateur:#1D5560;--c-us-amateur:#233866;--c-us-womens-amateur:#6A2436;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soot);color:var(--cream);font-family:var(--serif);overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}
[tabindex="-1"]:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--paper);color:var(--ink);padding:12px 14px;font:600 13px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
button{font:inherit;color:inherit}

/* ---------- masthead ---------- */
.mh{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 var(--gut);
  background:linear-gradient(180deg,#120906,#1A0E09);border-bottom:1px solid rgba(201,164,92,.3)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:500 17px/1 var(--serif)}
.brand .logo{width:30px;height:30px;flex:none}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(239,230,210,.9)}
.nav a:hover{color:var(--amber)}

/* ---------- the wall: perforated hardboard in a dark clubhouse ---------- */
.wall{position:relative;display:grid;grid-template-rows:1fr auto;height:calc(100svh - 56px);min-height:620px;background:var(--soot)}
.board{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#6E5530 #1A120D;
  background:
    radial-gradient(circle at 11px 11px,#130D09 0 2.3px,rgba(0,0,0,.35) 2.8px,transparent 3.4px) 0 0/22px 22px,
    linear-gradient(180deg,rgba(255,235,200,.05),rgba(0,0,0,.25)),
    var(--board)}
.board:focus{outline:none}
/* the corner: the darkest part of the room, one lamp over the oldest tags */
.corner{position:sticky;left:0;z-index:4;flex:none;width:min(440px,34vw);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:40px var(--gut) 46px;
  background:linear-gradient(90deg,rgba(9,6,4,.96) 0,rgba(9,6,4,.9) 72%,rgba(9,6,4,0) 100%)}
.corner::before{content:"";position:absolute;left:62%;top:-80px;width:200%;height:150%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 38% 46% at 30% 34%,rgba(255,196,120,.30),rgba(255,170,90,.10) 45%,transparent 72%)}
h1{margin:0;font:700 clamp(36px,3.6vw,56px)/1.02 var(--serif);color:var(--cream);letter-spacing:.005em}
.line{margin:0;font:italic 400 clamp(16px,1.2vw,18px)/1.5 var(--serif);color:rgba(239,230,210,.88)}
.find{position:relative;display:grid;gap:8px;margin-top:6px}
.find label{font:700 clamp(18px,1.5vw,22px)/1.2 var(--serif);color:var(--amber)}
.combo{display:flex;border-radius:4px;background:#0B0705;box-shadow:0 0 0 1px #6E5530,0 0 0 3px #150E09,0 0 0 4px rgba(201,164,92,.5),inset 0 2px 6px rgba(0,0,0,.7)}
.combo:focus-within{box-shadow:0 0 0 1px #6E5530,0 0 0 3px #150E09,0 0 0 4px var(--amber),inset 0 2px 6px rgba(0,0,0,.7)}
.combo input{flex:1;min-width:0;min-height:52px;padding:0 16px;border:0;background:transparent;color:var(--cream);font:400 18px/1 var(--serif)}
.combo input::placeholder{color:rgba(230,220,198,.6);font-style:italic}
.combo input:focus{outline:none}
.combo input::-webkit-search-cancel-button{filter:invert(.8)}
.combo button{min-width:80px;border:0;border-radius:0 4px 4px 0;cursor:pointer;background:linear-gradient(180deg,#F6E3A8,#D9B66C 45%,#C29A55 80%,#8A6A32);color:#2A1D0C;font:700 16px/1 var(--serif)}
.q-list{position:absolute;left:0;right:0;top:calc(100% - 22px);z-index:20;margin:0;padding:6px 0;list-style:none;max-height:50vh;overflow:auto;border-radius:4px;
  background:var(--paper);color:var(--ink);box-shadow:0 20px 50px -10px rgba(0,0,0,.8)}
.q-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:10px 14px;cursor:pointer;min-height:44px}
.q-list li[aria-selected="true"],.q-list li:hover{background:#E6D9BF}
.q-list .n{font:600 17px/1.2 var(--serif)}
.q-list .w{grid-column:1/-1;font:600 12px/1.3 var(--sans);color:var(--ink-2)}
.q-list .b{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.q-note{min-height:1.2em;margin:0;font:italic 14px/1.4 var(--serif);color:rgba(239,230,210,.82)}

/* ---------- year columns ---------- */
.cols{display:flex;margin:0;padding:0 40px 0 0;list-style:none}
.cols:empty{min-width:100vw;min-height:100svh}
.col{flex:none;width:272px;height:100%;display:grid;grid-template-rows:54px repeat(var(--n,4),minmax(0,1fr));gap:0;padding:0 8px;position:relative;
  --age:0;border-right:1px solid rgba(0,0,0,.28)}
.col{content-visibility:auto;contain-intrinsic-size:auto 272px auto 700px}
.col::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;background:rgba(255,230,190,.05)}
/* the year plate: an engraved brass strip screwed to the board */
.plate{align-self:center;justify-self:center;margin:0;padding:6px 18px 7px;border-radius:2px;position:relative;
  background:linear-gradient(180deg,#EED7A0,#C9A45C 45%,#9C7A3C 100%);color:#2A1D0C;
  font:700 22px/1 var(--serif);letter-spacing:.06em;font-variant-numeric:lining-nums;
  box-shadow:inset 0 1px 0 rgba(255,246,214,.75),inset 0 -1px 0 rgba(60,36,10,.6),0 0 0 1px #3B2A12,0 4px 8px -2px rgba(0,0,0,.65);
  text-shadow:0 1px 0 rgba(255,240,200,.45)}
.plate button{all:unset;cursor:pointer;display:block;padding:4px 0}
.plate button:focus-visible{outline:2px solid #2A1D0C;outline-offset:3px}
.plate::before,.plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF0C0,#6A4E20 70%)}
.plate::before{left:6px}.plate::after{right:6px}
.col.pending .plate{opacity:.8}
.blk{position:relative;container-type:size;padding:4px 4px 2px;border-top:1px solid rgba(0,0,0,.22);display:grid;grid-template-rows:auto auto auto auto;align-content:start;min-height:0}
.col.n1 .blk,.col.n2 .blk{align-content:center;gap:4px}
.col.lit{background:radial-gradient(ellipse 90% 70% at 50% 40%,rgba(255,196,120,.13),transparent 72%)}
.col.lit .tag.t-champion{filter:drop-shadow(0 0 10px rgba(255,190,110,.5))}
.col.n1 .e-leather.t-champion,.col.n2 .e-leather.t-champion{box-shadow:0 0 22px 2px rgba(255,190,110,.28),inset 0 0 0 1.4px rgba(40,18,6,.55),inset 0 2px 2px rgba(255,220,170,.22),0 7px 12px -5px rgba(0,0,0,.75)}
.col.n1 .tag.big{--w:min(46cqw,104px);--h:min(40cqh,142px)}
.blk h3{margin:0 0 2px;display:flex;justify-content:space-between;gap:6px;font:600 10.5px/1.25 var(--sans);letter-spacing:.05em;color:rgba(239,230,210,.86);white-space:nowrap;min-height:1.3em}
.blk h3 > span:first-child{overflow:hidden;text-overflow:ellipsis}
.blk h3 .v{overflow:hidden;text-overflow:ellipsis;font:italic 400 12px/1.25 var(--serif);letter-spacing:0;color:rgba(239,230,210,.74)}
.blk h3 i{display:inline-block;margin-right:5px;vertical-align:1px;flex:none;width:8px;height:8px;margin-top:2px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.hang{display:flex;align-items:flex-start;gap:8px}
.smalls{display:flex;gap:5px;margin-top:2px}
.rack{display:flex;align-items:center;gap:8px;min-height:24px;margin-top:3px;border:0;padding:0;background:none;cursor:pointer;text-align:left;width:100%}
.rack canvas{flex:1;min-width:0;height:18px;display:block}
.rack span{flex:none;font:600 11px/1 var(--sans);letter-spacing:.04em;color:rgba(239,230,210,.84)}
.rack:hover span,.rack:focus-visible span{color:var(--amber)}
.blk .note{margin:0;font:italic 12px/1.3 var(--serif);color:rgba(239,230,210,.78)}
/* a year with no championship: empty hooks and a small plate */
.blk.nh .hang{align-items:center;justify-content:flex-start;gap:16px}
.hook{flex:none;width:10px;height:22px;position:relative}
.hook::before{content:"";position:absolute;left:3px;top:0;width:4px;height:14px;border-radius:2px;background:linear-gradient(90deg,#5A5550,#C8C2B8 45%,#6A645C)}
.hook::after{content:"";position:absolute;left:1px;top:10px;width:8px;height:8px;border:2px solid #A8A29A;border-top-color:transparent;border-radius:50%}
.np{display:inline-block;padding:3px 8px;border-radius:2px;background:linear-gradient(180deg,#D8D2C6,#A29C90);color:#26221D;font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 4px rgba(0,0,0,.5)}
.flt-off{display:none!important}

/* ---------- a tag on its peg ---------- */
.peg{position:relative;flex:none;padding-top:10px;transform-origin:50% 6px;
  transform:rotate(calc(var(--sw,0) * var(--k,1) * 1deg));transition:transform 1.4s cubic-bezier(.2,2.2,.35,1)}
/* the peg in the board and the cord loop through the tag's hole */
.peg::before{content:"";position:absolute;left:50%;top:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;z-index:2;background:radial-gradient(circle at 35% 35%,#EDE6DA,#6A645C 70%);box-shadow:0 1px 2px rgba(0,0,0,.7)}
.peg::after{content:"";position:absolute;left:50%;top:3px;width:12px;height:16px;margin-left:-6px;z-index:1;border:1.6px solid var(--cord,#2A2420);border-bottom:0;border-radius:6px 6px 0 0;opacity:.9}
.tag{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:0;border:0;cursor:pointer;text-align:left;
  width:var(--w);height:var(--h);border-radius:9px;color:var(--ink-on,#2A1A0E);overflow:hidden;isolation:isolate;
  box-shadow:0 7px 12px -5px rgba(0,0,0,.75),0 2px 3px rgba(0,0,0,.4)}
.tag.big{--h:min(44cqh,128px);--w:min(44cqw,calc(var(--h) * .96));padding:0 6px 6px}
.tag.small{--w:min(13cqw,30px);--h:min(16cqh,40px);border-radius:5px}
.tag .hole{position:absolute;left:50%;top:7%;width:22%;aspect-ratio:1;margin-left:-11%;border-radius:50%;z-index:3;
  background:radial-gradient(circle,#160F0A 0 42%,var(--grommet,#B8935A) 46% 68%,#5A4022 74%,transparent 78%)}
.tag .nm{position:relative;z-index:3;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal;word-break:normal;hyphens:manual;font:700 clamp(10px,5.6cqw,12.5px)/1.12 var(--serif);color:var(--ink-on)}
.tag .nm .w,.back h3 .w,.inhand h2 .w,.bag-head h2 .w{white-space:nowrap}
.tag .tr .sh{display:none}
.tag .tr.short .full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tag .tr.short .sh{display:inline}
.tag .tr.ell{text-overflow:ellipsis}
.tag .nm.ell .w{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.tag .tr{position:relative;z-index:3;margin-top:3px;font:600 clamp(7.5px,3.6cqw,9px)/1 var(--sans);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:clip;text-transform:uppercase;color:var(--foil-ink,var(--ink-on))}
.tag .md{position:absolute;right:6px;top:6px;z-index:3;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF3C4,#D3A947 55%,#7D5A18);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.5)}
.tag .md::after{content:"M";position:absolute;inset:0;display:grid;place-items:center;font:700 8px/1 var(--sans);color:#3A2808}
/* light catches the stamping: a soft highlight that follows the lamp (and the pointer) */
.tag::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at calc(var(--lx,30) * 1%) 8%,rgba(255,236,200,var(--glint,.2)),transparent 58%)}
/* patina and wear: older tags get darker edges, scuffs and a duller face */
.tag::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:calc(var(--age) * var(--wear,1));
  background:var(--tex-wear,none),radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(20,10,4,.4) 100%);mix-blend-mode:multiply}

/* era 1 · stamped leather (to 1941) */
.e-leather{--ink-on:#2B1709;--grommet:#B8935A;--cord:#3A2416;
  background:var(--tex-leather,none),linear-gradient(160deg,var(--l1,#B07A48),var(--l2,#7A4A26));background-blend-mode:multiply,normal;
  box-shadow:inset 0 0 0 1.4px rgba(40,18,6,.55),inset 0 2px 2px rgba(255,220,170,.22),inset 0 -3px 6px rgba(0,0,0,.35),0 7px 12px -5px rgba(0,0,0,.75)}
.e-leather.big{background-clip:padding-box}
.e-leather .nm{text-shadow:0 1px 0 rgba(255,226,182,.28),0 -1px 0 rgba(0,0,0,.35)}
.e-leather.big .stitch{position:absolute;inset:5px;z-index:1;border:1.3px dashed rgba(240,214,166,.55);border-radius:6px;pointer-events:none}
.e-leather.t-champion{--l1:#7A4524;--l2:#4A2410;--ink-on:#F5DE9A;--foil-ink:#F5DE9A;--grommet:#E2C06A}
.e-leather.t-champion .nm,.e-leather.t-champion .tr{text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 6px rgba(255,214,120,.25)}
.e-leather.t-runner-up{--l1:#3A2C24;--l2:#1C1410;--ink-on:#E4E2DC;--foil-ink:#E4E2DC;--grommet:#C9C6BE}
.e-leather.t-runner-up .nm,.e-leather.t-runner-up .tr{text-shadow:0 1px 0 rgba(0,0,0,.7)}
.e-leather.t-semifinalist{--l1:#7E2E24;--l2:#4A1712;--ink-on:#F1C7A2;--grommet:#C8875A}
.e-leather.t-quarterfinalist{--l1:#D8AE80;--l2:#BA8A58}
.e-leather.t-competitor{--l1:#8A6446;--l2:#5E4128;--ink-on:#E9D9C1}

/* era 2 · brass and enamel (1946–1979) */
.e-brass{--ink-on:#F4EBD6;--grommet:#E9D39A;--cord:#2B2520;
  background:linear-gradient(var(--en,#233866),var(--en,#233866)) padding-box,linear-gradient(150deg,var(--m1,#F2DC9E),var(--m2,#B88E40) 45%,var(--m3,#6E5020) 100%) border-box;
  border:3px solid transparent}
.e-brass.big{padding:0 6px 6px}
.e-brass .nm{text-shadow:0 1px 0 rgba(0,0,0,.5)}
.e-brass .enamel{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(165deg,rgba(255,255,255,.22),transparent 38%,rgba(0,0,0,.18) 100%)}
.e-brass.t-champion{--m1:#FFF0BE;--m2:#D9B050;--m3:#7A5414;--en:#6E4F12;--ink-on:#FFF0C4;--foil-ink:#FFE08A}
.e-brass.t-runner-up{--m1:#FFFFFF;--m2:#B9BCC0;--m3:#5E6166;--en:#2C3036;--ink-on:#F2F3F5;--foil-ink:#DADDE2;--grommet:#DADDE2}
.e-brass.t-semifinalist{--m1:#F6C99C;--m2:#B4703E;--m3:#5E3214;--en:#4A2414;--ink-on:#F7DCC2}
.e-brass.t-quarterfinalist{--en:var(--cc)}
.e-brass.t-competitor{--en:#E9E0CC;--ink-on:#2A2420;--foil-ink:#5A4A32}
.e-brass.t-competitor .nm{text-shadow:none}

/* era 3 · printed acrylic (1980 on): glossy slabs with a lit edge */
.e-acrylic{--ink-on:#FFFFFF;--grommet:#D8DCE4;--cord:#1A1A22;
  background:linear-gradient(118deg,rgba(255,255,255,.55) 0 7%,rgba(255,255,255,.08) 22%,transparent 40%),linear-gradient(160deg,var(--p1,#2A2F3A),var(--p2,#101218));
  box-shadow:inset 0 0 0 1.3px rgba(255,255,255,.42),inset 0 0 0 2.6px rgba(120,150,255,.28),inset 0 -2px 0 rgba(255,140,190,.25),0 8px 14px -6px rgba(0,0,0,.75)}
.e-acrylic .nm{text-shadow:0 1px 1px rgba(0,0,0,.45)}
.e-acrylic .band{position:absolute;left:0;right:0;top:30%;height:9%;z-index:1;background:var(--cc);opacity:.95;pointer-events:none}
.e-acrylic.t-champion{--p1:#F8E09A;--p2:#CFA03E;--ink-on:#1E1203;--foil-ink:#2A1A04}
.e-acrylic.t-champion .nm{text-shadow:0 1px 0 rgba(255,246,214,.5)}
.e-acrylic.t-runner-up{--p1:#F6F8FA;--p2:#AEB3BA;--ink-on:#15181D;--foil-ink:#1C2026}
.e-acrylic.t-runner-up .nm{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.e-acrylic.t-semifinalist{--p1:#E0A070;--p2:#7A3E18;--ink-on:#FFF4EA}
.e-acrylic.t-quarterfinalist{--p1:var(--cc);--p2:#0E1016}
.e-acrylic.t-competitor{--p1:#262A33;--p2:#08090C}
.tag.small .band{top:36%;height:14%}

/* nation, filtered: tags whose nation is on record for the chosen nation stand out */
.board.nf .tag:not(.is-n),.board.nf .rack{opacity:.16}
.board.nf .tag.is-n{box-shadow:0 0 0 2px var(--amber),0 7px 12px -5px rgba(0,0,0,.75)}

/* ---------- the rail: filters and the year scrubber ---------- */
.rail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding:10px var(--gut);background:linear-gradient(180deg,#1A110C,#120B08);border-top:1px solid rgba(201,164,92,.35)}
.rail fieldset{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:0;padding:0;border:0}
.rail legend{float:left;margin-right:10px;font:600 11px/44px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.rail label{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:400 14.5px/1.2 var(--serif);color:var(--cream);cursor:pointer}
.rail input[type=checkbox],.rail input[type=radio]{width:22px;height:22px;margin:0;accent-color:#C9A45C}
.rail .nat span,.rail .scrub span{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.rail select{min-height:40px;padding:0 10px;border-radius:3px;border:1px solid #6E5530;background:#0B0705;color:var(--cream);font:400 15px/1 var(--serif)}
.scrub{flex:1;min-width:260px}
.scrub output{color:var(--amber);font:700 16px/1 var(--serif);letter-spacing:0;margin-left:6px}
.scrub input{flex:1;min-width:0;height:44px;accent-color:#C9A45C;cursor:pointer}

/* ---------- sheets: the tag in hand, a whole column, a player's bag ---------- */
.sheet{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow:auto;padding:24px;background:rgba(6,4,3,.86);backdrop-filter:blur(2px)}
.sheet[hidden]{display:none}
.sheet .x{position:absolute;right:14px;top:12px;z-index:5;min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:3px;background:rgba(239,230,210,.08);color:var(--cream);cursor:pointer;font:600 13px/1 var(--sans);letter-spacing:.06em}
.sheet .x:hover{background:rgba(239,230,210,.16)}

/* the tag in hand: lifted off the wall, turned over */
.inhand{display:grid;justify-items:center;gap:16px;width:min(560px,100%)}
.inhand h2{margin:0;text-align:center;font:700 22px/1.2 var(--serif)}
.inhand h2 small{display:block;font:italic 400 16px/1.4 var(--serif);color:rgba(239,230,210,.82)}
.flip{position:relative;width:min(320px,82vw);aspect-ratio:320/480;max-height:calc(100svh - 190px);perspective:1400px}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .9s cubic-bezier(.3,1.4,.4,1)}
.flip .front{transform:rotateY(0)}
.flip .back{transform:rotateY(180deg)}
.flip.turned .front{transform:rotateY(-180deg)}
.flip.turned .back{transform:rotateY(0)}
.flip .tag.big,.flip .tag{--w:100%;--h:100%;width:100%;height:100%;border-radius:20px;padding:0 22px 24px;cursor:default}
.flip .tag .nm{font-size:30px;-webkit-line-clamp:3}
.flip .tag .tr{font-size:13px;margin-top:10px}
.flip .tag .md{width:34px;height:34px;right:16px;top:16px}
.flip .tag .md::after{font-size:15px}
.flip .tag .meta{position:relative;z-index:3;margin:8px 0 0;font:600 12px/1.35 var(--sans);letter-spacing:.06em;color:var(--foil-ink,var(--ink-on))}
.flip .tag.e-leather .stitch{inset:10px;border-radius:13px;border-width:2px}
.flip .back .tag{justify-content:flex-start;padding:62px 22px 18px;overflow:auto}
.flip .back .tag .hole{width:13%;margin-left:-6.5%;top:3.5%}
.back-l{position:relative;z-index:3;list-style:none;margin:6px 0 0;padding:0}
.back-l li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--ink-on) 25%,transparent);font:15px/1.3 var(--serif)}
.back-l .r{font:600 10.5px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.back-l .won{font-weight:700}
.back h3{position:relative;z-index:3;margin:0;font:700 17px/1.2 var(--serif)}
.back .sub{position:relative;z-index:3;margin:2px 0 0;font:italic 14px/1.35 var(--serif)}
.back a{position:relative;z-index:3;font:600 13px/1.4 var(--sans)}
.back .links{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:0 16px;margin:8px 0 0}
.back .links a{display:inline-flex;align-items:center;min-height:32px}
/* the clipping slot: empty until research files a cutting. It says so, and holds no invented words. */
.clip{position:relative;z-index:3;margin:10px 0 0;padding:10px 12px;border:1.5px dashed color-mix(in srgb,var(--ink-on) 45%,transparent);border-radius:4px}
.clip b{display:block;font:600 10.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.clip p{margin:4px 0 0;font:italic 14px/1.35 var(--serif);opacity:.9}
.inhand .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:3px;border:1px solid #6E5530;background:#140D09;color:var(--cream);cursor:pointer;font:600 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none}
.btn.gold{border:0;background:linear-gradient(180deg,#F6E3A8,#D9B66C 45%,#C29A55 80%,#8A6A32);color:#2A1D0C}

/* a whole year column, every tag at full size */
.colview{width:min(1180px,100%);align-self:start;padding:8px 0 40px}
.colview > h2{margin:0 0 4px;font:700 34px/1 var(--serif)}
.colview > .sub{margin:0 0 18px;font:italic 16px/1.4 var(--serif);color:rgba(239,230,210,.84)}
.cv-blk{margin:0 0 22px;padding:14px 16px 16px;border-radius:4px;container-type:inline-size;
  background:radial-gradient(circle at 11px 11px,#130D09 0 2.3px,transparent 3px) 0 0/22px 22px,var(--board);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.cv-blk h3{margin:0;display:flex;align-items:center;gap:8px;font:700 19px/1.2 var(--serif)}
.cv-blk h3 i{width:10px;height:10px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.cv-blk .sub{margin:2px 0 10px;font:italic 14px/1.4 var(--serif);color:rgba(239,230,210,.82)}
.cv-tags{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none}
.cv-tags .tag.big{--w:84px;--h:116px;padding:0 6px 6px}
.cv-tags .tag .nm{font-size:11.5px}
.cv-tags .tag .tr{font-size:8px}
.cv-tags .tag.focus{box-shadow:0 0 0 3px var(--amber),0 7px 12px -5px rgba(0,0,0,.75)}

/* ---------- the bag ---------- */
.bagview{place-items:stretch}
.bagwrap{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 28px;width:min(1240px,100%);height:min(820px,calc(100svh - 48px));margin:auto}
.bag-head{grid-column:1/-1;padding-right:96px}
.bag-head h2{margin:0;font:700 clamp(28px,3vw,42px)/1.05 var(--serif)}
.bag-head p{margin:6px 0 0;font:italic 17px/1.4 var(--serif);color:rgba(239,230,210,.86)}
.stage{position:relative;min-height:0}
.stage svg.bagart{position:absolute;right:2%;bottom:0;height:100%;width:auto;max-width:62%}
.cluster{position:absolute;left:0;top:4%;width:64%;height:92%}
.cluster .slot{position:absolute;transform-origin:50% 4px}
.cluster .tag.big{--w:var(--tw);--h:var(--th);padding:0 5px 5px}
.cluster .tag .nm{font-size:calc(var(--tw) * .125)}
.cluster .tag .tr{font-size:calc(var(--tw) * .085)}
.tag .yr{position:relative;z-index:3;font:700 calc(var(--tw,80px) * .2)/1 var(--sans);letter-spacing:.02em;color:var(--ink-on)}
.cluster .tag .nm{font-size:calc(var(--tw) * .115);-webkit-line-clamp:2}
.cluster svg.cords{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bag-side{min-height:0;overflow:auto;padding-right:6px}
.bag-side h3{margin:0 0 6px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.bag-l{list-style:none;margin:0 0 14px;padding:0}
.bag-l li{display:grid;grid-template-columns:3.2em 1fr;gap:0 8px;padding:6px 0;border-bottom:1px solid rgba(239,230,210,.12);font:15px/1.35 var(--serif)}
.bag-l .y{font:600 13px/1.6 var(--sans);color:var(--amber)}
.bag-l .t{font:600 10.5px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(239,230,210,.78)}
.bag-l button{all:unset;display:inline-block;padding:3px 0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(239,230,210,.35);text-underline-offset:3px}
.bag-l button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.bag-acts{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.flyer{position:fixed;z-index:45;pointer-events:none;transition:transform .9s cubic-bezier(.25,.9,.3,1.05),opacity .3s}

/* ---------- rare sets and the ledger ---------- */
.sets,.ledger{color:var(--ink);background:var(--paper);content-visibility:auto;contain-intrinsic-size:auto 1600px}
.sets{background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(255,255,255,.35),transparent 70%),var(--paper)}
.in{max-width:1280px;margin:0 auto;padding:clamp(36px,5vw,72px) var(--gut)}
.sets h2,.ledger h2{margin:0;font:700 clamp(28px,3vw,40px)/1.1 var(--serif)}
.lead{margin:8px 0 26px;max-width:62ch;font:italic 17px/1.5 var(--serif);color:var(--ink-2)}
.set{margin:0 0 30px;padding:20px 22px 18px;border-radius:4px;background:linear-gradient(180deg,#2E251E,#241C16);color:var(--cream);
  box-shadow:inset 0 0 0 6px #5A3E24,inset 0 0 0 7px #2A1C10,inset 0 0 0 8px rgba(255,220,170,.18),0 14px 30px -14px rgba(0,0,0,.6)}
.set h3{margin:0;font:700 22px/1.2 var(--serif)}
.set .rule{margin:4px 0 12px;font:italic 15px/1.4 var(--serif);color:rgba(239,230,210,.84)}
.set-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 24px}
.set-l li{padding:8px 0 4px;border-top:1px solid rgba(239,230,210,.14)}
.set-l li > a{display:inline-flex;align-items:center;min-height:32px;font:700 17px/1.2 var(--serif);text-decoration-color:rgba(239,230,210,.35);text-underline-offset:3px}
.set-l .x{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.04em;color:rgba(239,230,210,.82)}
.set-l .mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;container-type:inline-size}
.set-l .mini .tag{--w:30px;--h:42px;border-radius:5px;cursor:pointer}
.az{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 26px;padding:0;list-style:none}
.az a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:40px;font:600 14px/1 var(--sans);color:#22406E}
.lg-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px 40px}
.lg h3{margin:0 0 6px;padding-bottom:8px;border-bottom:2px solid var(--ink);font:700 19px/1.2 var(--serif)}
.lg ol{list-style:none;margin:0;padding:0;font:14.5px/1.4 var(--serif)}
.lg li{padding:2px 0}
.lg .y{display:inline-block;min-width:3.1em;font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.lg .nh{font-style:italic;color:var(--ink-2)}

/* the player index pages */
.idx{background:var(--paper);color:var(--ink)}
.idx .mh{color:var(--cream)}
.idx main h1{margin:0;color:var(--ink);font:700 40px/1.1 var(--serif)}
.pl{padding:16px 0;border-bottom:1px solid rgba(74,58,40,.22)}
.pl h2{margin:0;font:700 20px/1.2 var(--serif)}
.pl .pn,.pl .pc{margin:2px 0 0;font:600 12.5px/1.6 var(--sans);color:var(--ink-2)}
.pl .pc a{color:#22406E}
.pl table{width:100%;max-width:900px;margin-top:8px;border-collapse:collapse;font:15px/1.35 var(--serif)}
.pl th{text-align:left;font:600 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:4px 10px 4px 0;border-bottom:1px solid rgba(74,58,40,.3)}
.pl td{padding:4px 10px 4px 0;vertical-align:top;border-bottom:1px solid rgba(74,58,40,.1)}
.pl td:first-child{font:600 13px/1.6 var(--sans);font-variant-numeric:tabular-nums}

.foot{background:#0B0705;border-top:1px solid rgba(201,164,92,.3)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:14px var(--gut)}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:28px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.foot small{font:600 12px/1.4 var(--sans);color:rgba(239,230,210,.75)}
.nos{align-self:center;margin:0 40px;max-width:40ch;font:italic 18px/1.5 var(--serif);color:var(--cream)}

/* ---------- phone: a vertical pegboard; you scroll down through the years ---------- */
@media (max-width:899px){
  .nav a:nth-child(3){display:none}
  .brand{font-size:15px}
  .wall{display:block;height:auto;min-height:0}
  .board{display:block;overflow:visible}
  .wall{overflow:clip}
  .col.n1 .blk{grid-column:1/-1}
  .col.n1{grid-template-rows:56px 270px;contain-intrinsic-size:auto 390px auto 336px}
  .col.n2{grid-template-rows:56px 248px;contain-intrinsic-size:auto 390px auto 314px}
  .col.n3,.col.n4{grid-template-rows:56px 248px 248px;contain-intrinsic-size:auto 390px auto 562px}
  .col.n1 .tag.big{--w:min(46cqw,100px);--h:min(50cqh,140px)}
  .corner{position:relative;overflow:hidden;width:auto;padding:30px var(--gut) 28px;background:linear-gradient(180deg,rgba(9,6,4,.96),rgba(9,6,4,.82) 80%,rgba(9,6,4,.4))}
  .corner::before{left:-10%;top:30%;width:140%;height:120%}
  .cols{display:block;padding:0}
  .col{width:auto;height:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:56px;grid-auto-rows:248px;padding:0 6px 10px;border-right:0;border-bottom:1px solid rgba(0,0,0,.3)}
  .col .plate{grid-column:1/-1}
  .blk{border-top:0;padding:4px 6px}
  .blk h3{white-space:normal}
  .blk h3 .v{display:none}
  .tag.big{--w:min(46cqw,86px);--h:min(47cqh,120px)}
  .blk .note{font-size:11.5px;line-height:1.2}
  .tag.small{--w:24px;--h:34px}
  .smalls{gap:4px}
  .rail{position:sticky;bottom:0;z-index:30;gap:0 14px;padding:4px 14px;box-shadow:0 -10px 20px rgba(0,0,0,.45)}
  .rail fieldset,.rail .nat{display:none}
  .rail.open fieldset,.rail.open .nat{display:flex}
  .scrub{min-width:0}
  .bagwrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;height:calc(100svh - 24px);gap:6px}
  .bag-head{padding-right:84px}
  .sampler div{display:grid}
  .bag-head p{font-size:15px}
  .stage svg.bagart{max-width:42%;right:0}
  .cluster{width:60%}
  .bag-side{max-height:none;overflow:visible}
  .bagwrap{height:auto;grid-template-rows:auto 56svh auto}
  .bag-acts .btn{min-height:44px;padding:0 12px;font-size:12px}
  .bag-l li{font-size:14px}
  .bag-l .t{display:block}
  .sheet{padding:14px}
  .cv-tags .tag.big{--w:calc((100cqw - 30px) / 4);--h:calc((100cqw - 30px) / 4 * 1.38)}
}
@media (prefers-reduced-motion:reduce){
  .peg{transition:none;transform:none}
  .flip .face{transition:none}
  .flyer{transition:none}
}
@media (forced-colors:active){
  .tag{border:2px solid CanvasText}
}