/* Tropebound Games studio site. The Imprint, Annotated.
   Layout: one reading column on paper, black hairline rules between sections,
   trope tabs on the page edge, dark "jacket" panels for game features. */

@font-face{font-family:"Libre Caslon Display";src:url(/assets/fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Caveat";src:url(/assets/fonts/caveat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#f5f4f1; --paper-2:#ecebe6; --ink:#1c1a1f; --soft:#4a4650; --muted:#6a6570; --rule:#1c1a1f; --hair:#d9d5cf;
  --ox:#7a1d30; --ox-2:#9b3348; --plum:#43375a; --ochre:#8a5f12; --flame:#c0425a;
  --jacket:#16141b; --jacket-2:#221f28; --cream:#efe9df; --cream-2:#d8d0c2; --gilt:#f0d9a0; --gilt-2:#cbb88f; --lilac:#a79fb2;
  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --text:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --pad:clamp(18px,4.5vw,56px);
  --max:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--text)}
img,svg{max-width:100%}
a{color:var(--ox);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:10}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Draft banner */
.draft{background:var(--ox);color:#fff;font:500 .82rem/1.4 var(--ui);text-align:center;padding:8px 16px}

/* Header */
.site-head{border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand svg{width:34px;height:42px;flex:none}
.brand-word{display:grid;line-height:1}
.bw-name{font:400 1.7rem/1 var(--display);letter-spacing:-.005em}
.bw-games{font:600 .6rem var(--ui);letter-spacing:.55em;text-transform:uppercase;color:var(--ox);margin-top:4px;padding-left:2px}
.nav{display:flex;gap:4px 22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{font:500 .8rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--ox);color:var(--ox)}

/* Type */
.kick{font:600 .74rem var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ox);margin:0 0 16px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
.h-hero{font-size:clamp(2.3rem,5.8vw,4.5rem);line-height:1.03;letter-spacing:-.012em}
.h-page{font-size:clamp(2.1rem,4.8vw,3.4rem);line-height:1.06}
.h-sec{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.12}
.h-sub{font-size:1.4rem;line-height:1.2}
.lede{font-size:1.08rem;color:var(--soft);max-width:56ch;margin:22px 0 0}
.prose{max-width:66ch}
.prose p{margin:0 0 14px}
.prose h2{font-size:1.55rem;margin:34px 0 10px}
.prose h3{font-size:1.2rem;margin:24px 0 8px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:4px 0}
.meta{font:500 .76rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sig{font:500 .78rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ox)}

/* Sections */
.sec{padding-block:clamp(36px,6vw,80px)}
.sec + .sec{border-top:1px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.split{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(18px,4vw,40px)}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* Hero, annotated */
.hero{position:relative;padding-block:clamp(36px,6vw,84px);padding-right:clamp(0px,15vw,180px)}
.hl{position:relative;white-space:nowrap}
.hl svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.hl path{fill:none;stroke:var(--ox);stroke-width:3.2;stroke-linecap:round}
.margin-note{font:600 1.55rem/1.1 var(--hand);color:var(--ox);transform:rotate(-4deg);margin:18px 0 0 38%;max-width:16ch}
.flags{position:absolute;right:calc(var(--pad) * -1);top:clamp(34px,6vw,90px);display:flex;flex-direction:column;align-items:flex-end;gap:8px;list-style:none;margin:0;padding:0}
.flags li{display:flex}
.flag{font:600 .7rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:9px 16px 9px 12px;border-radius:4px 0 0 4px;white-space:nowrap}
@media (max-width:760px){
  .hero{padding-right:0}
  .flags{position:static;flex-direction:row;flex-wrap:wrap;margin-top:24px}
  .flag{border-radius:4px}
  .margin-note{margin-left:0}
}
@media (prefers-reduced-motion:no-preference){
  .hl path{stroke-dasharray:420;animation:tb-draw 1.1s .35s ease-out both}
  .flags .flag{animation:tb-tab .6s ease-out both}
  .flags li:nth-child(2) .flag{animation-delay:.08s}.flags li:nth-child(3) .flag{animation-delay:.16s}.flags li:nth-child(4) .flag{animation-delay:.24s}
}
@keyframes tb-draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
@keyframes tb-tab{from{transform:translateX(16px)}to{transform:none}}

/* Genre colors */
.g-rom{background:var(--ox)} .g-rom2{background:var(--ox-2)} .g-dark{background:var(--plum)} .g-fan{background:var(--ochre)}

/* Game feature (jacket) */
.games{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px}
@media (max-width:820px){.games{grid-template-columns:1fr}}
.jacket{position:relative;background:var(--jacket);color:var(--cream);padding:30px 28px 26px;display:grid;gap:12px;align-content:start;min-width:0}
.jacket .meta{color:var(--lilac)}
.jacket .title{font:400 clamp(2rem,4vw,2.5rem)/1 var(--display);color:var(--gilt)}
.jacket .edition{font-style:italic;color:var(--gilt-2)}
.jacket p{margin:0;color:var(--cream-2)}
.jacket a{color:var(--gilt)}
.edge-tabs{position:absolute;top:-9px;right:18px;display:flex;gap:4px}
.edge-tabs i{display:block;width:15px;height:24px;border-radius:0 0 3px 3px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tab{display:inline-block;font:600 .68rem/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:#fff;padding:6px 8px;border-radius:3px}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:12px;border-top:1px solid #3a3440}
.badge{display:inline-flex;align-items:stretch;font:600 .72rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:3px;overflow:hidden;white-space:nowrap}
.badge span{padding:6px 8px;display:flex;align-items:center}
.badge span+span{border-left:1.5px solid currentColor;letter-spacing:0}
.jacket .badge{color:var(--gilt)}
.descr{font:400 .82rem/1.4 var(--ui);color:#cbc3d4}
.heat{display:inline-flex;align-items:center;gap:3px;font:500 .72rem var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#cbc3d4}
.heat svg{width:10px;height:14px;fill:var(--flame)}
.heat .lbl{margin-right:4px}
.heat .note{margin-left:6px;text-transform:none;letter-spacing:0;font-size:.8rem}
.gate-note{font:400 .8rem/1.4 var(--ui);color:var(--lilac)}

.btn{display:inline-block;justify-self:start;font:600 .78rem var(--ui);letter-spacing:.09em;text-transform:uppercase;padding:12px 18px;border:1px solid currentColor;color:var(--ink);text-decoration:none;background:transparent;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.jacket .btn{color:var(--gilt)}
.jacket .btn:hover{background:var(--gilt);color:var(--jacket)}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover{background:var(--ox);border-color:var(--ox)}

.slot{border:1px solid var(--rule);padding:28px;display:grid;gap:12px;align-content:start;min-width:0}

/* Signup */
.signup{display:grid;gap:10px;margin-top:6px}
.signup .row{display:flex;gap:8px;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 200px;min-width:0;font:400 1rem var(--ui);padding:11px 12px;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.signup label.check{display:flex;gap:8px;align-items:flex-start;font:400 .86rem/1.4 var(--ui);color:var(--soft)}
.signup input[type=checkbox]{margin-top:2px;accent-color:var(--ox)}
.signup .hp{position:absolute;left:-9999px}
.signup .msg{font:500 .86rem/1.4 var(--ui);min-height:1.2em;margin:0}
.signup .msg.ok{color:#2f6b4f}.signup .msg.err{color:var(--ox)}

/* Principles */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}
.pillars li{border-top:2px solid var(--ink);padding-top:12px}
.pillars h3{font-size:1.2rem;margin-bottom:6px}
.pillars p{margin:0;color:var(--soft);font-size:.96rem}

/* Facts table and lists */
.facts{width:100%;border-collapse:collapse;font:400 .95rem/1.5 var(--ui)}
.facts th,.facts td{text-align:left;vertical-align:top;padding:10px 0;border-bottom:1px solid var(--hair)}
.facts th{width:34%;font-weight:600;color:var(--soft);padding-right:16px}
.table-wrap{overflow-x:auto}

/* Support FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:400 1.15rem/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 1.4rem/1 var(--ui);color:var(--ox)}
.faq details[open] summary:after{content:"\2212"}
.faq .ans{padding:0 0 18px;max-width:66ch}
.faq .ans p{margin:0 0 10px}
.faq .ans p:last-child{margin:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{border:1px solid var(--rule);padding:22px;display:grid;gap:8px;align-content:start;min-width:0}
.card h3{font-size:1.25rem}
.card p{margin:0;color:var(--soft);font-size:.96rem}

.email{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 1rem var(--ui)}
.email code{font:500 1rem var(--ui);background:var(--paper-2);padding:4px 8px;user-select:all}
.copy{font:600 .7rem var(--ui);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);background:transparent;padding:5px 8px;cursor:pointer;color:var(--ink)}

.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.notes{grid-template-columns:1fr}}
.notes ul{margin:0;padding-left:20px;font:400 .95rem/1.55 var(--ui);color:var(--soft)}
.notes h3{font:600 .76rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ox);margin-bottom:10px}

.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.logo-tile{border:1px solid var(--rule);display:grid;gap:10px;padding:18px}
.logo-tile .art{display:flex;align-items:center;justify-content:center;min-height:140px;background:var(--paper-2)}
.logo-tile .art.dark{background:var(--jacket)}
.logo-tile .art img{max-height:90px;max-width:88%;width:auto;height:auto}
.logo-tile .links{display:flex;gap:14px;font:500 .84rem var(--ui)}
.logo-tile .links span{margin-right:auto;color:var(--soft)}

.policy-date{font:500 .82rem var(--ui);color:var(--muted);margin-top:10px}

/* Footer */
.site-foot{border-top:1px solid var(--rule);margin-top:0}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;padding-block:28px 36px;font:400 .84rem/1.6 var(--ui);color:var(--soft)}
@media (max-width:760px){.site-foot .wrap{grid-template-columns:1fr}}
.site-foot ul{display:flex;gap:6px 18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.site-foot a{color:var(--soft)}
.site-foot a:hover{color:var(--ox)}
.site-foot .fine{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:14px;font-size:.8rem;color:var(--muted)}