/* The treasure hunt participation page.
   ═══════════════════════════════════════════════════════════════════════

   Namespace `thj-`. It loads AFTER css/treasure-hunts.css and inherits that
   file's palette, its :where() resets, its nav and its modal — this is the
   same chart room, one room further in, not a second design language.

   Two constraints shaped nearly every rule below.

   FIRST, this page is a FORM, and it is filled in standing up, one-handed,
   in daylight, on a phone, in a crowd. So: inputs are 52px tall with 16px
   text (any smaller and iOS zooms the viewport on focus, which throws the
   layout sideways mid-typing), labels sit above their fields rather than
   beside them, the submit button is the largest object on the screen, and
   nothing important is reachable only by hover.

   SECOND, the hero and footer artwork have their words painted into them.
   A painted headline cannot be read by a screen reader, cannot be found by
   a search engine, cannot be selected, and at 390px is about nine pixels
   tall. So the real words exist in the markup every time, and these rules
   decide whether they are shown or hidden:

     .thj-hero--art.is-painted  →  wide screens show the painting and hide
                                   the copy visually (still in the a11y tree)
     under 720px                →  a text-free crop of the same painting is
                                   the backdrop, and the real copy is drawn
                                   over it at a legible size

   Which means the phone layout is not a shrunken version of the desktop
   one. It is the honest one. */

.thj-body{ --thj-panel:#0A1721; --thj-edge:rgba(200,155,60,.30); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.thj-hero{position:relative;isolation:isolate;overflow:hidden}

.thj-hero--plain{
  padding:clamp(48px,11vw,104px) var(--pad);text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,155,60,.10), transparent 62%),
    linear-gradient(180deg,#07121C,#050709);
  border-bottom:1px solid var(--hair)}

.thj-hero__art{display:block;position:absolute;inset:0;z-index:-1}
.thj-hero__art img{width:100%;height:100%;object-fit:cover}

.thj-hero--art{min-height:min(74vh,620px);display:grid;align-items:end}

/* The scrim, and it is doing real work rather than adding mood.

   Measured on the first render at 390px: the kicker and the lead line sat
   over the lantern flame and the skull's browridge — the brightest and
   busiest part of the whole painting — and were close to unreadable. A
   gentle wash was not enough, because the problem is not darkness, it is
   BUSYNESS: gold type over gold highlights at any opacity. So the lower two
   thirds of the picture, which is where the words are, gets pushed most of
   the way to black, and the top third is left alone so the artwork still
   reads as artwork. */
.thj-hero--art::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(5,7,9,.30) 0%, rgba(5,7,9,.18) 20%,
    rgba(5,7,9,.62) 46%, rgba(5,7,9,.88) 72%, rgba(5,7,9,.96) 100%)}
.thj-hero--art .thj-hero__art img{filter:brightness(.86)}

.thj-hero__in{position:relative;z-index:1;
  width:min(760px,100%);margin:0 auto;padding:clamp(28px,6vw,64px) var(--pad);text-align:center}

/* The hub's kicker colour is tuned for a flat dark band. Over a painting it
   disappears, so it gets more weight and a shadow of its own here. */
.thj-hero .th-kicker{color:var(--parch);opacity:1;
  text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
.thj-hero h1{font-size:clamp(30px,7.2vw,58px);letter-spacing:.02em;
  text-transform:uppercase;color:var(--gold-lt);
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
.thj-hero__sub{margin-top:10px;font-family:var(--display);font-weight:600;
  font-size:clamp(19px,4.4vw,30px);letter-spacing:.06em;color:var(--cream);
  text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.thj-hero__lead{margin-top:8px;font-size:clamp(14px,3.4vw,18px);
  letter-spacing:.09em;color:var(--parch);text-shadow:0 2px 12px rgba(0,0,0,.85)}

.thj-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;
  margin:20px auto 0;max-width:560px}
.thj-marks li{flex:1 1 44%;min-width:132px;padding:6px 4px}
.thj-marks b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(11px,2.7vw,13px);letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-lt);text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* The legal line is the one piece of hero copy that must never be only a
   picture, so it keeps its own plate at every width. */
.thj-free{display:inline-block;margin-top:22px;padding:11px 26px;
  background:linear-gradient(180deg,#9C2F26,#6F1F18);
  border:1px solid rgba(227,190,114,.55);
  font-family:var(--display);font-weight:600;
  font-size:clamp(11.5px,2.8vw,14px);letter-spacing:.15em;text-transform:uppercase;
  color:#F4E6C8;box-shadow:0 6px 24px rgba(0,0,0,.5)}

/* Wide screens, painted artwork: the picture already says all of this. */
@media (min-width:720px){
  .thj-hero--art.is-painted .thj-hero__in{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .thj-hero--art.is-painted::after{background:none}
  .thj-hero--art{min-height:0}
  .thj-hero--art .thj-hero__art{position:static}
  .thj-hero--art.is-painted .thj-hero__art img{height:auto;max-height:78vh;filter:none}
}

/* ── the poster hero ──────────────────────────────────────────────────

   A hunt can hand the page a printed poster instead of a banner. The poster
   is portrait and already typeset — headline, dates, the four steps, what is
   in the chest — so the job here is the opposite of the banner's: show the
   whole sheet, crop nothing, and put nothing on top of it.

   On a phone it runs edge to edge and the form begins immediately under it,
   which is the whole point: the hunter scanned a QR off this exact poster
   thirty seconds ago and needs to recognise where they landed.

   On a wide screen a 2:3 poster blown across 1400px would be a wall, so it
   is capped by the viewport height instead of the page width and the dark
   ground is lit behind it like a frame.

   The page's own words are hidden at EVERY width in this layout — not
   removed. They are still read aloud, still indexed, still the h1. */

.thj-hero--poster{
  display:block;text-align:center;
  padding:0 0 clamp(18px,4vw,26px);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(200,155,60,.10), transparent 64%),
    linear-gradient(180deg,#07121C,#050709);
  border-bottom:1px solid var(--hair)}

/* The sheet is held to exactly the width of the panels underneath it, using
   the same width and the same gutter as .thj-wrap, so its edges line up with
   the Hunter Record and the rules rather than floating over them. */
.thj-poster{display:block;width:min(1480px,100%);margin:0 auto;
  padding-inline:clamp(16px,2.4vw,36px);line-height:0}

.thj-poster__img{display:block;width:100%;height:auto;margin:0 auto}

/* Hidden, not gone. The sheet carries its own lettering as pixels; the real
   words go on living in the markup for screen readers and for search. */
.thj-hero--poster .thj-hero__in{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.thj-poster__legal{padding:clamp(16px,4vw,22px) var(--pad) 0}
.thj-poster__legal .thj-free{margin-top:0}

@media (min-width:720px){
  .thj-hero--poster{padding-top:clamp(18px,2.6vw,30px)}
}
@media (max-width:719px){
  .thj-poster{padding-inline:14px}
}

/* ── the page body ────────────────────────────────────────────────────── */

.thj-wrap{width:min(1180px,100%);margin:0 auto;
  padding:clamp(22px,5vw,54px) var(--pad) clamp(40px,8vw,80px)}

.thj-grid{display:grid;gap:clamp(16px,3vw,26px);margin-top:clamp(16px,3vw,26px)}
@media (min-width:900px){
  .thj-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:start}
}
.thj-grid__side{display:grid;gap:clamp(16px,3vw,26px)}
/* Join the Crew sits beside Invite Your Crew rather than above it. auto-fit
   rather than a fixed two columns so the row still fills when referrals are
   switched off and only one panel is there, and so it folds back to one
   column when the side rail gets narrow. */
.thj-pair{display:grid;gap:clamp(16px,3vw,26px);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.thj-pair > .thj-panel{height:100%}

/* The hunt sheet moved to the top of the page, so this block now carries the
   rules alone and no longer splits into columns. */
.thj-bottom{display:grid;gap:clamp(16px,3vw,26px);
  margin-top:clamp(16px,3vw,26px);align-items:start}

/* ── the frame every panel shares ─────────────────────────────────────── */

.thj-panel{position:relative;
  padding:clamp(20px,4.4vw,34px);
  background:linear-gradient(180deg,rgba(11,27,39,.96),rgba(7,18,28,.96));
  border:1px solid var(--thj-edge);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
/* Brass corners, drawn rather than imported: four 14px angles, no images. */
.thj-panel::before,.thj-panel::after{content:'';position:absolute;
  width:14px;height:14px;border:1px solid var(--gold);pointer-events:none}
.thj-panel::before{top:6px;left:6px;border-right:0;border-bottom:0}
.thj-panel::after{bottom:6px;right:6px;border-left:0;border-top:0}

.thj-panel__head{margin-bottom:18px}
.thj-panel__head--center{text-align:center}
.thj-panel__head h2{font-size:clamp(20px,4.6vw,28px);color:var(--gold-lt);
  letter-spacing:.04em}
.thj-panel__head p{margin-top:6px;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}

.thj-body-copy{color:var(--cream);font-size:15.5px}
.thj-hint{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--dim)}

/* ── the four lamps ───────────────────────────────────────────────────── */

.thj-lamps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:760px){ .thj-lamps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.thj-lamp{display:flex;align-items:center;gap:9px;min-height:52px;
  padding:10px 13px;border:1px solid var(--hair-soft);
  background:rgba(7,18,28,.8)}
.thj-lamp span{font-size:15px;color:var(--dim);flex:none}
.thj-lamp b{font-size:13px;letter-spacing:.05em;color:var(--cream);
  font-family:var(--display);font-weight:600;min-width:0}
.thj-lamp i{margin-left:auto;font-style:normal;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);flex:none}
.thj-lamp.is-done{border-color:rgba(79,191,139,.42);background:var(--live-dim)}
.thj-lamp.is-done span,.thj-lamp.is-done i{color:var(--live)}
.thj-lamp.is-warn{border-color:rgba(200,155,60,.5)}
.thj-lamp.is-warn i{color:var(--gold-lt)}

/* ── the form ─────────────────────────────────────────────────────────── */

.thj-signed{margin-bottom:16px;padding:11px 14px;
  border-left:2px solid var(--gold);background:rgba(200,155,60,.08);
  font-size:14px;color:var(--cream);word-break:break-word}

.thj-referrer{display:flex;gap:10px;margin-bottom:16px;padding:12px 14px;
  border:1px solid rgba(79,191,139,.34);background:var(--live-dim);
  font-size:14px;line-height:1.5;color:var(--cream)}
.thj-referrer span{color:var(--live);flex:none}

.thj-field{display:block;margin-bottom:15px}
.thj-field > span{display:block;margin-bottom:6px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--parch)}
.thj-field em{font-style:normal;color:var(--wax-lt)}
.thj-field i{font-style:normal;text-transform:none;letter-spacing:.04em;color:var(--dim)}

/* 16px is not a taste decision: below it, iOS Safari zooms the page on focus
   and the hunter loses their place in the form. */
.thj-field input,.thj-field select{
  width:100%;min-height:52px;padding:13px 15px;font:inherit;font-size:16px;
  color:var(--cream);background:rgba(4,12,18,.9);
  border:1px solid var(--hair-soft);border-radius:0;appearance:none}
.thj-field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--parch) 50%),
                   linear-gradient(135deg,var(--parch) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;
  background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.thj-field input::placeholder{color:#5C6971}
.thj-field input:focus,.thj-field select:focus{border-color:var(--gold);outline:none}
.thj-field input:focus-visible,.thj-field select:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:2px}
.thj-hint{display:block}

.thj-row{display:grid;gap:0}
@media (min-width:520px){ .thj-row{grid-template-columns:1.35fr 1fr;gap:0 14px} }

.thj-check{display:flex;gap:11px;align-items:flex-start;
  margin:0 0 13px;padding:11px 0;cursor:pointer;min-height:44px}
.thj-check input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--gold)}
.thj-check span{font-size:14.5px;line-height:1.5;color:var(--cream)}
.thj-check i{display:block;margin-top:3px;font-style:normal;
  font-size:13px;color:var(--dim)}
.thj-check--rules,.thj-consent-rules{margin-top:16px;padding:13px;
  border:1px solid var(--thj-edge);background:rgba(200,155,60,.06)}
/* The box is the wrapper now, so the label inside gives up its own spacing. */
.thj-consent-rules .thj-check{margin:0;padding:0;min-height:0}
.thj-consent-rules__read{margin-top:6px;padding-left:33px}
.thj-accepted--inline{margin:4px 0 14px}

/* Required operational messaging is a STATEMENT, not a pre-ticked box. */
.thj-consent--fixed{display:flex;gap:10px;margin:4px 0 14px;padding:12px 14px;
  border:1px dashed rgba(200,155,60,.4);background:rgba(200,155,60,.05);
  font-size:14px;line-height:1.5;color:var(--cream)}
.thj-consent--fixed span{color:var(--gold-lt);flex:none}

/* The four reasons verification matters. Without these they ran together as
   one wall of text, which is the opposite of what a list is for. */
.thj-why{display:grid;gap:2px;margin:14px 0 18px}
.thj-why li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:14.5px;line-height:1.5;color:var(--dim)}
.thj-why li:last-child{border-bottom:0}
.thj-why b{color:var(--gold-lt);font-weight:600}

.thj-error{margin:4px 0 14px;padding:12px 14px;
  border:1px solid rgba(180,69,58,.62);background:rgba(142,43,36,.22);
  font-size:14.5px;line-height:1.5;color:#F3D9D4}

/* ── "you are not registered yet" ─────────────────────────────────────
   Loud on purpose. Both of these say the same thing at the two points
   where people believed they had finished and had not. */

.thj-sent__head{padding-bottom:15px;margin-bottom:4px;
  border-bottom:1px solid rgba(200,155,60,.25)}
.thj-sent__flag{font-family:var(--display);font-weight:600;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wax-lt)}
.thj-sent__head h2{margin-top:6px;font-size:clamp(23px,4.8vw,32px);
  line-height:1.08;letter-spacing:.03em;color:var(--gold-lt)}
/* Normal case: this line carries the hunter's own email address, and an
   address in letter-spaced capitals is something you decode, not read. */
.thj-sent__lede{margin-top:10px;font-size:15px;line-height:1.55;
  letter-spacing:normal;text-transform:none;color:var(--cream)}
.thj-sent__lede b{color:var(--gold-lt);font-weight:600;overflow-wrap:anywhere}

.thj-sent__steps{display:grid;gap:2px;margin:14px 0 4px;list-style:none}
.thj-sent__steps li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:13px;align-items:start;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.055)}
.thj-sent__steps li:last-child{border-bottom:0}
/* Only the DIRECT child is the numbered disc. A plain b:first-child also
   caught the <b> opening a sentence and stamped a 30px gold circle around
   the words "24 hours". */
.thj-sent__steps > li > b{display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(200,155,60,.1);
  font-family:var(--display);font-size:13px;color:var(--gold-lt)}
.thj-sent__steps span{font-size:14.5px;line-height:1.55;color:var(--cream)}
.thj-sent__steps i{font-style:normal;color:var(--gold-lt)}
.thj-sent__steps i.is-subject{font-weight:600}

/* Two flex items, never three: the <b> inside used to become a column of
   its own and broke the sentence into vertical strips. */
.thj-sent__warn{display:flex;gap:11px;margin-top:16px;padding:12px 14px;
  border:1px solid rgba(200,155,60,.45);background:rgba(200,155,60,.08);
  font-size:14px;line-height:1.55;color:var(--cream)}
.thj-sent__warn > i{flex:none;font-style:normal;font-size:16px;color:var(--gold-lt)}
.thj-sent__warn > span{flex:1 1 auto;min-width:0}
.thj-sent__warn b{color:var(--gold-lt);font-weight:600}

.thj-notyet{display:flex;gap:11px;margin-bottom:16px;padding:13px 15px;
  border:1px solid rgba(180,69,58,.55);
  background:linear-gradient(180deg,rgba(142,43,36,.26),rgba(142,43,36,.14));
  font-size:14.5px;line-height:1.55;color:#F6E4E0}
/* Same trap as the warn box: <b> and <em> were becoming flex items and
   splitting one sentence into three columns. Icon, then everything else. */
.thj-notyet > i{flex:none;font-style:normal;color:var(--wax-lt);font-size:16px}
.thj-notyet > span{flex:1 1 auto;min-width:0}
.thj-notyet b{display:block;color:#FFF0EC;font-weight:600}
.thj-notyet em{font-style:normal;color:var(--gold-lt)}

.thj-accepted{display:flex;gap:9px;margin-top:16px;padding:12px 14px;
  border:1px solid rgba(79,191,139,.38);background:var(--live-dim);
  font-size:14px;color:var(--cream)}
.thj-tick{color:var(--live);flex:none}

/* ── buttons ──────────────────────────────────────────────────────────── */

.thj-cta{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:58px;margin-top:6px;padding:16px 22px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));
  border:1px solid rgba(255,235,190,.5);color:#14100A;
  font-family:var(--display);font-weight:700;font-size:clamp(14px,3.4vw,16.5px);
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.thj-cta:hover{filter:brightness(1.07);box-shadow:0 12px 34px rgba(200,155,60,.3)}
.thj-cta:active{transform:translateY(1px)}
.thj-cta:disabled{filter:grayscale(.45) brightness(.8);cursor:progress}
.thj-cta__mark{font-size:17px;line-height:1}

.thj-cta--quiet{margin-top:12px;
  background:transparent;color:var(--gold-lt);border-color:var(--thj-edge)}
.thj-cta--quiet:hover{background:rgba(200,155,60,.1);box-shadow:none}

.thj-alt{margin-top:14px;text-align:center;font-size:14px;color:var(--dim)}
.thj-link{background:none;border:0;padding:6px 4px;min-height:44px;
  color:var(--gold-lt);font:inherit;font-size:14px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.thj-link--block{display:block;margin-top:12px;text-align:center}

/* ── the gate and the success card ────────────────────────────────────── */

.thj-gate{text-align:center}
.thj-gate h2{font-size:clamp(21px,5vw,30px);color:var(--gold-lt)}
.thj-gate p{margin-top:12px;color:var(--cream);font-size:15.5px}
.thj-gate__when{color:var(--parch);letter-spacing:.06em}

.thj-done{text-align:center;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(79,191,139,.14),transparent 64%),
    linear-gradient(180deg,rgba(11,27,39,.96),rgba(7,18,28,.96));
  border-color:rgba(79,191,139,.42)}
.thj-done h2{font-size:clamp(25px,6vw,40px);color:var(--gold-lt);
  text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.thj-done__facts{display:grid;gap:1px;margin:22px 0 20px;
  background:var(--hair-soft);border:1px solid var(--hair-soft);text-align:left}
@media (min-width:560px){ .thj-done__facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.thj-done__facts > div{display:flex;justify-content:space-between;gap:12px;
  padding:13px 15px;background:rgba(4,12,18,.86)}
.thj-done__facts dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);flex:none}
.thj-done__facts dd{margin:0;font-size:14.5px;color:var(--cream);
  text-align:right;min-width:0;overflow-wrap:anywhere}
.thj-done__facts dd.is-live{color:var(--live);font-weight:600}

/* ── how it works ────────────────────────────────────────────────────────

   The one parchment surface on the page. It earns it: this is the block a
   stranger reads before deciding to hand over an email address. */

.thj-steps{
  background:
    linear-gradient(180deg,rgba(215,183,122,.96),rgba(186,155,101,.96));
  border-color:rgba(74,58,40,.5);color:var(--chart-ink)}
.thj-steps::before,.thj-steps::after{border-color:rgba(74,58,40,.6)}
.thj-steps .thj-panel__head h2{color:#3B2C1C}
.thj-steps .thj-panel__head p{color:rgba(59,44,28,.72)}

.thj-steps__list{display:grid;gap:3px}
.thj-steps__list li{display:flex;gap:14px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid rgba(74,58,40,.2)}
.thj-steps__list li:last-child{border-bottom:0}
.thj-steps__list b{flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:#2A1F14;color:var(--parch);
  font-family:var(--display);font-size:13px;letter-spacing:.02em}
.thj-steps__list h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:#2F2417}
.thj-steps__list p{margin-top:3px;font-size:14px;color:rgba(47,36,23,.82)}
.thj-steps__foot{margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(74,58,40,.28);text-align:center;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(47,36,23,.8)}

/* ── the account block: the vault ────────────────────────────────────────
   The band that tells a first-time registrant what the account is FOR.

   Three things in here are deliberate:

   • THE FRAME IS DRAWN. Four brass corner angles come from one pseudo
     element carrying eight 1px gradients — no images, no four extra spans,
     and it scales with the band instead of being a fixed-size picture.

   • THE STATUS LINE IS LIVE. .is-in / .is-out are coloured by the server's
     answer, and when nobody is signed in the line is absent rather than
     guessing. A painted badge would start lying the first time a state
     changed.

   • THE CORNER SCRIPT IS ORNAMENT, so it goes away under 900px rather than
     fighting the copy for the same 30px of gutter. */

.thj-vault{position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(18px,3.4vw,30px);
  padding:clamp(28px,5vw,54px) clamp(20px,4.4vw,50px);
  background:
    radial-gradient(130% 110% at 50% -10%,rgba(21,48,66,.95),rgba(5,14,21,.99) 68%),
    var(--deep);
  border:1px solid var(--thj-edge);
  box-shadow:0 24px 64px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05)}

/* Eight hairlines, four corners, one element. */
.thj-vault::before{content:'';position:absolute;inset:9px;pointer-events:none;
  --g:linear-gradient(var(--gold),var(--gold));
  background:
    var(--g) 0 0/22px 1px no-repeat,      var(--g) 0 0/1px 22px no-repeat,
    var(--g) 100% 0/22px 1px no-repeat,   var(--g) 100% 0/1px 22px no-repeat,
    var(--g) 0 100%/22px 1px no-repeat,   var(--g) 0 100%/1px 22px no-repeat,
    var(--g) 100% 100%/22px 1px no-repeat,var(--g) 100% 100%/1px 22px no-repeat}
/* And a second, fainter frame just inside it. */
.thj-vault::after{content:'';position:absolute;inset:15px;pointer-events:none;
  border:1px solid rgba(200,155,60,.13)}

/* The compass sunk into the back of the band. */
.thj-vault__deep{position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:50%;translate:-50% -50%;
  width:min(72vw,620px);aspect-ratio:1;opacity:.055}
.thj-vault__deep svg{width:100%;height:100%;display:block}

.thj-vault__script{position:absolute;top:clamp(16px,2.4vw,26px);
  font-family:var(--display);font-style:italic;font-size:13px;
  letter-spacing:.06em;color:rgba(227,190,114,.42);pointer-events:none}
.thj-vault__script--l{left:clamp(34px,4vw,54px)}
.thj-vault__script--r{right:clamp(34px,4vw,54px)}
@media (max-width:899px){ .thj-vault__script{display:none} }

.thj-vault__in{position:relative;display:grid;gap:clamp(22px,3.6vw,40px);
  align-items:center}
@media (min-width:900px){
  .thj-vault__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .thj-vault__script{top:clamp(20px,2.6vw,30px)}
  .thj-vault{padding-top:clamp(46px,5.6vw,66px)}
}

.thj-vault__lede h2{font-size:clamp(23px,5vw,34px);line-height:1.15;
  letter-spacing:.035em;color:var(--gold-lt);
  text-shadow:0 2px 18px rgba(0,0,0,.6)}

/* hairline — seal — hairline */
.thj-vault__rule{display:flex;align-items:center;gap:12px;
  margin:14px 0 13px;max-width:420px}
.thj-vault__rule i{flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.thj-vault__rule svg{flex:none;width:20px;height:20px;display:block;
  fill:var(--wax-lt);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

.thj-vault__sub{font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--parch)}
.thj-vault__copy{margin-top:12px;max-width:52ch;
  font-size:15.5px;line-height:1.62;color:var(--cream)}

.thj-vault__state{display:flex;align-items:center;gap:9px;
  margin-top:16px;padding:9px 13px;width:fit-content;max-width:100%;
  border:1px solid var(--hair-soft);background:rgba(4,12,18,.6);
  font-size:13.5px;line-height:1.35;color:var(--dim)}
.thj-vault__state b{font-weight:600;color:var(--cream)}
.thj-vault__state.is-in{border-color:rgba(79,191,139,.38);
  background:var(--live-dim)}
.thj-vault__state.is-in b{color:var(--live)}
.thj-vault__state.is-out b{color:var(--parch)}
.thj-vault__pip{flex:none;width:15px;height:15px;color:var(--parch)}
.thj-vault__state.is-in .thj-vault__pip{color:var(--live)}
.thj-vault__pip svg{width:100%;height:100%;display:block}

.thj-vault__cta{display:inline-flex;align-items:center;gap:11px;
  margin-top:20px;padding:13px 22px;min-height:52px;
  border:1px solid var(--gold);
  background:linear-gradient(180deg,#9B3026,#6E1F19);
  color:var(--cream);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:13.5px;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .22s var(--ease,ease),box-shadow .22s,background .22s}
.thj-vault__cta:hover{transform:translateY(-2px);
  background:linear-gradient(180deg,#AE382C,#7C241C);
  box-shadow:0 16px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16)}
.thj-vault__cta:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.thj-vault__wheel{flex:none;width:22px;height:22px}
.thj-vault__wheel svg{width:100%;height:100%;display:block}
.thj-vault__arrow{font-size:17px;line-height:1;color:var(--gold-lt);
  transition:translate .22s}
.thj-vault__cta:hover .thj-vault__arrow{translate:4px 0}

/* Two columns at every width. Four made each tile about 130px wide at
   1440px, which put "Collectible Tokens" on three lines. */
.thj-vault__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  /* Equal rows: without this the row holding "Collectible Tokens" grows to
     two lines of heading and the row under it sits 20px shorter. */
  grid-auto-rows:1fr;gap:clamp(9px,1.2vw,13px)}
.thj-vault__grid a{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  height:100%;padding:16px 15px;
  border:1px solid var(--hair-soft);
  background:linear-gradient(180deg,rgba(11,27,39,.72),rgba(4,12,18,.78));
  text-decoration:none;
  transition:border-color .22s,background .22s,transform .22s}
.thj-vault__grid a:hover{border-color:var(--gold);transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(19,44,60,.85),rgba(6,17,25,.85))}
.thj-vault__grid a:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
/* The same drawn corners as the band, at a quarter of the size. */
.thj-vault__grid a::before{content:'';position:absolute;inset:4px;
  pointer-events:none;opacity:.55;
  --g:linear-gradient(var(--gold),var(--gold));
  background:
    var(--g) 0 0/9px 1px no-repeat,      var(--g) 0 0/1px 9px no-repeat,
    var(--g) 100% 100%/9px 1px no-repeat,var(--g) 100% 100%/1px 9px no-repeat}
.thj-vault__grid a:hover::before{opacity:1}
.thj-vault__emblem{flex:none;width:clamp(38px,4.4vw,46px);aspect-ratio:1}
.thj-vault__emblem svg{width:100%;height:100%;display:block}
.thj-vault__body{min-width:0}
.thj-vault__body b{display:block;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-lt);overflow-wrap:anywhere}
.thj-vault__body b i{font-style:normal;margin-left:6px;opacity:.6;
  transition:opacity .22s}
.thj-vault__grid a:hover b i{opacity:1}
.thj-vault__body span{display:block;margin-top:6px;font-size:13.5px;
  line-height:1.5;color:var(--dim)}

@media (max-width:459px){
  .thj-vault__grid{grid-template-columns:minmax(0,1fr)}
  .thj-vault__grid a{align-items:center}
}

/* ── the drawn emblems ──────────────────────────────────────────────────
   One palette, four marks. Classes rather than inline fills so a theme
   change is one edit here instead of twenty in the markup. */
.e-ring{fill:none;stroke:rgba(200,155,60,.45);stroke-width:1.4}
.e-fill{fill:rgba(200,155,60,.15);stroke:var(--gold);stroke-width:1.4;
  stroke-linejoin:round}
.e-line{fill:none;stroke:var(--gold-lt);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.e-star{fill:var(--gold-lt);stroke:none}
.e-skull{fill:var(--gold-lt);stroke:none}
.e-eye{fill:#0A1620;stroke:none}
.thj-vault__grid a:hover .e-ring{stroke:rgba(227,190,114,.7)}

@media (prefers-reduced-motion:reduce){
  .thj-vault__cta,.thj-vault__grid a,.thj-vault__arrow{transition:none}
  .thj-vault__cta:hover,.thj-vault__grid a:hover{transform:none}
  .thj-vault__cta:hover .thj-vault__arrow{translate:0}
}

/* ── rules ───────────────────────────────────────────────────────────── */

.thj-rules__list{display:grid;gap:2px}
.thj-rules__list li{display:flex;gap:11px;align-items:flex-start;
  padding:9px 0;font-size:14.5px;line-height:1.5;color:var(--cream);
  border-bottom:1px solid rgba(255,255,255,.05)}
.thj-rules__list li:last-child{border-bottom:0}
.thj-rules__list span{flex:none;color:var(--gold);font-size:13px;margin-top:2px}

/* The hunt overview is informational artwork, so show the entire poster
   rather than cropping it to the height of the rules panel beside it. */
.thj-hunt-art{position:relative;margin:0;padding:7px;
  background:linear-gradient(180deg,rgba(11,27,39,.96),rgba(7,18,28,.96));
  border:1px solid var(--thj-edge);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.thj-hunt-art::before,.thj-hunt-art::after{content:'';position:absolute;
  width:14px;height:14px;border:1px solid var(--gold);pointer-events:none;z-index:1}
.thj-hunt-art::before{top:6px;left:6px;border-right:0;border-bottom:0}
.thj-hunt-art::after{right:6px;bottom:6px;border-left:0;border-top:0}
.thj-hunt-art picture,.thj-hunt-art img{display:block;width:100%}
.thj-hunt-art img{height:auto}

/* ── the treasure ────────────────────────────────────────────────────── */
.thj-prize__name{font-family:var(--display);font-weight:600;
  font-size:clamp(17px,2.6vw,21px);letter-spacing:.04em;color:var(--gold-lt)}
.thj-prize__list{display:grid;gap:0;margin-top:12px}
.thj-prize__list li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:11px;align-items:start;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:14.5px;line-height:1.5;color:var(--cream)}
.thj-prize__list li:last-child{border-bottom:0}
.thj-prize__list i{font-style:normal;color:var(--gold);font-size:12px;margin-top:3px}
.thj-prize__foot{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--hair-soft);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

.thj-rules-modal{max-width:min(720px,94vw)}
.thj-rules-modal__body{max-height:min(58vh,520px);overflow-y:auto;
  margin:16px 0;padding-right:8px;
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.thj-rules-modal__body p{margin:11px 0;font-size:14.5px;line-height:1.62;
  color:var(--cream)}

/* ── community ───────────────────────────────────────────────────────── */

.thj-social{display:grid;gap:9px;margin-top:16px}
.thj-social__link{display:flex;align-items:center;gap:11px;
  min-height:52px;padding:14px 16px;text-decoration:none;
  border:1px solid var(--hair-soft);background:rgba(4,12,18,.75);
  color:var(--cream);font-size:14.5px;
  transition:border-color .18s ease,background .18s ease}
.thj-social__link:hover{border-color:var(--gold);background:rgba(200,155,60,.09)}
.thj-social__mark{flex:none;width:22px;height:22px;object-fit:contain}
.thj-social__label{min-width:0}

/* ── the crew ────────────────────────────────────────────────────────── */

.thj-invite.is-locked{opacity:.86}
.thj-code{margin-bottom:12px}
.thj-code > span{display:block;margin-bottom:6px;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--parch)}
.thj-code > div{display:flex;align-items:stretch;gap:0;
  border:1px solid var(--hair-soft);background:rgba(4,12,18,.9)}
.thj-code b{flex:1 1 auto;min-width:0;display:flex;align-items:center;
  padding:12px 14px;font-family:var(--display);font-size:16px;
  letter-spacing:.09em;color:var(--gold-lt);
  overflow-wrap:anywhere;word-break:break-all}
.thj-code--link b{font-family:inherit;font-size:12.5px;letter-spacing:.01em;
  color:var(--cream);line-height:1.4}
.thj-copy{flex:none;min-width:64px;min-height:48px;padding:0 15px;
  border:0;border-left:1px solid var(--hair-soft);
  background:rgba(200,155,60,.14);color:var(--gold-lt);
  font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer}
.thj-copy:hover{background:rgba(200,155,60,.26)}

.thj-recruited{display:flex;align-items:baseline;gap:9px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--hair-soft);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.thj-recruited b{font-family:var(--display);font-size:26px;
  letter-spacing:0;color:var(--gold-lt)}
.thj-copied{margin-top:10px;min-height:20px;font-size:13px;color:var(--live)}

/* ── the closing picture ─────────────────────────────────────────────── */

/* One grid cell holding both the picture and the words, rather than the
   words absolutely positioned over it.

   The absolute version had a real bug, caught in a render test: the image is
   lazy-loaded and carries no intrinsic dimensions, so until it arrives the
   section has NO HEIGHT, and the closing line dropped straight on top of the
   panel above it — "History walks these streets" printed across the middle of
   the Invite Your Crew card. Stacked in a grid, the section is at least as
   tall as its text from the first paint, whatever the artwork does or when it
   turns up. */
.thj-foot-art{display:grid;grid-template-areas:'stack';isolation:isolate;
  border-top:1px solid var(--hair);background:var(--ink)}
/* The floor is not decoration, it is what makes the lazy image load at all.

   Measured: with no reserved height the section computed to 1px, so it never
   intersected the viewport, so the lazy loader never requested the image, so
   the section stayed 1px — a deadlock that left the closing artwork simply
   absent from the page. Intrinsic width/height attributes would be the usual
   answer, but the artwork is uploaded from Admin and its dimensions are not
   known here, so the fix is a floor big enough to be observed and small
   enough not to leave a hole. The real image overrides it the moment it
   arrives. */
.thj-foot-art > picture{grid-area:stack;display:block;min-width:0;
  min-height:clamp(160px,28vw,360px)}
.thj-foot-art img{width:100%;height:auto;display:block}
.thj-foot-art__copy{grid-area:stack;align-self:end;position:relative;
  padding:clamp(20px,5vw,44px) var(--pad);text-align:center;
  background:linear-gradient(180deg,transparent,rgba(5,7,9,.92))}
.thj-foot-art__copy p{font-family:var(--display);font-weight:600;
  font-size:clamp(16px,4vw,26px);letter-spacing:.05em;text-transform:uppercase;
  color:var(--cream);text-shadow:0 2px 16px rgba(0,0,0,.9)}
.thj-foot-art__copy small{display:block;margin-top:8px;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--parch)}
/* The painted footer already carries this line on wide screens. */
@media (min-width:720px){
  .thj-foot-art.is-painted .thj-foot-art__copy{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* ── motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .thj-cta{transition:none}
  .thj-cta:active{transform:none}
}

/* ═══ illustrated chart-room pass ══════════════════════════════════════
   The supplied comps are image-rich, but this page still needs live form
   controls and state. These layers borrow their atmosphere without baking
   any operational text into pixels. */

.thj-body main{
  background:
    linear-gradient(180deg,rgba(3,7,10,.86),rgba(3,7,10,.96) 38%,rgba(3,7,10,.9)),
    url('/images/contact-harbour.jpg') center top/cover fixed no-repeat;
}
.thj-wrap{width:min(1480px,100%);padding-inline:clamp(16px,2.4vw,36px)}
.thj-grid,.thj-grid__side,.thj-bottom,.thj-pair{gap:clamp(14px,1.65vw,24px)}

.th-nav{border-bottom-color:rgba(227,190,114,.42);
  box-shadow:0 8px 30px rgba(0,0,0,.56),inset 0 -1px rgba(227,190,114,.08)}
.th-brand b{color:var(--gold-lt);text-shadow:0 1px 12px rgba(200,155,60,.24)}

.thj-panel{
  border-color:rgba(227,190,114,.52);
  box-shadow:0 22px 60px rgba(0,0,0,.62),inset 0 0 0 5px rgba(3,8,12,.68),
    inset 0 0 0 6px rgba(200,155,60,.16),inset 0 0 46px rgba(0,0,0,.3);
}
.thj-panel::before,.thj-panel::after{width:24px;height:24px;border-width:2px}
.thj-panel__head{padding-bottom:15px;border-bottom:1px solid rgba(200,155,60,.25)}
.thj-panel__head h2{font-size:clamp(25px,2.5vw,40px);line-height:1.02;
  color:#F0C978;text-transform:uppercase;letter-spacing:.025em;
  text-shadow:0 2px 0 #5B3511,0 7px 20px rgba(0,0,0,.9)}
.thj-panel__head p{margin-top:9px;color:#C6B58F;letter-spacing:.2em}

.thj-lamps{gap:10px}
.thj-lamp{min-height:58px;padding:11px 15px;border-color:rgba(227,190,114,.3);
  background:linear-gradient(180deg,rgba(8,24,34,.96),rgba(3,12,18,.96));
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.32),0 8px 22px rgba(0,0,0,.3)}
.thj-lamp b{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#EAD8B2}
.thj-lamp span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid currentColor;font-size:11px}

.thj-record{
  background:
    linear-gradient(180deg,rgba(3,13,20,.98) 0%,rgba(4,16,24,.95) 58%,
      rgba(3,12,18,.76) 79%,rgba(2,8,12,.62) 100%),
    url('/galveston/images/harbor-1600.webp') center bottom/cover;
}
.thj-record .thj-panel__head::before{content:'\2693';float:left;margin:1px 13px 0 0;
  color:var(--gold-lt);font-size:32px;line-height:1;text-shadow:0 2px 12px #000}
.thj-field{margin-bottom:18px}
.thj-field > .thj-field__label{display:flex;align-items:center;gap:10px;margin-bottom:8px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;
  color:#E5BC68}
.thj-field__mark{display:grid;place-items:center;flex:none;width:27px;height:27px;
  color:#E9B95E;font-size:17px;font-family:Georgia,serif}
.thj-field__label > span{min-width:0}
.thj-field input,.thj-field select{min-height:58px;border:1px solid #B98632;
  background-color:rgba(2,11,17,.9);box-shadow:inset 0 0 20px rgba(0,0,0,.52),
  0 0 0 1px rgba(242,200,112,.08);font-size:16px}
.thj-field input:focus,.thj-field select:focus{border-color:#F0C56D;
  box-shadow:0 0 0 3px rgba(200,155,60,.16),inset 0 0 20px rgba(0,0,0,.52)}
.thj-signed{border:1px solid rgba(227,190,114,.22);border-left:3px solid var(--gold);
  background:rgba(215,183,122,.08)}
.thj-consent--fixed{border-style:solid;background:
  linear-gradient(90deg,rgba(215,183,122,.15),rgba(200,155,60,.05));
  box-shadow:inset 0 0 22px rgba(0,0,0,.25)}

.thj-record .thj-cta,.thj-rules .thj-cta--quiet{
  position:relative;min-height:64px;
  background:linear-gradient(180deg,#A72F24 0%,#741D17 52%,#4B100E 100%);
  border:1px solid #E0B55B;color:#F4DEAC;
  box-shadow:inset 0 0 0 4px rgba(39,8,6,.78),inset 0 0 0 5px rgba(227,190,114,.28),
    0 12px 28px rgba(0,0,0,.48);text-shadow:0 2px 2px #260806}
.thj-record .thj-cta:hover,.thj-rules .thj-cta--quiet:hover{
  background:linear-gradient(180deg,#BB392C,#81231B 52%,#57130F);filter:none}

.thj-steps{
  background:
    linear-gradient(180deg,rgba(229,207,159,.91),rgba(190,155,93,.94)),
    url('/galveston/images/parchment-1500.webp') center/cover;
  background-blend-mode:multiply;
  box-shadow:0 22px 60px rgba(0,0,0,.62),inset 0 0 70px rgba(92,53,15,.25),
    inset 0 0 0 6px rgba(71,43,16,.14)}
.thj-steps .thj-panel__head{border-bottom-color:rgba(74,58,40,.28)}
.thj-steps .thj-panel__head h2{color:#33210F;text-shadow:0 1px rgba(255,255,255,.35)}
.thj-steps__list li{padding:14px 0}
.thj-steps__list b{width:42px;height:42px;border:2px solid rgba(215,183,122,.72);
  box-shadow:0 0 0 2px #2A1F14,0 5px 12px rgba(38,24,10,.28)}
.thj-steps__list h3{font-size:clamp(14px,1.45vw,19px);font-weight:700}
.thj-steps__list p{font-size:14.5px}

.thj-crew-join{
  min-height:340px;
  background:
    linear-gradient(90deg,rgba(2,11,17,.97) 0%,rgba(3,13,20,.9) 58%,rgba(2,8,12,.62)),
    url('/galveston/images/harbor-1600.webp') center/cover;
}
.thj-crew-join .thj-body-copy{max-width:38ch;font-size:16px;line-height:1.68}
.thj-social__link{min-height:60px;border-color:#C69A45;font-family:var(--display);
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.42),inset 0 0 0 3px rgba(0,0,0,.3)}
.thj-social__link--facebook{background:linear-gradient(180deg,#2466D7,#153E94);color:#fff}
.thj-social__link--facebook:hover{background:linear-gradient(180deg,#3478EA,#1B4AAA)}
.thj-social__link--facebook .thj-social__mark{width:26px;height:26px}

.thj-invite{
  min-height:315px;
  background:
    radial-gradient(circle at 88% 15%,rgba(200,155,60,.14),transparent 32%),
    linear-gradient(90deg,rgba(3,13,20,.97),rgba(4,16,24,.92)),
    url('/images/about/origin-texture.jpg') center/cover;
}
.thj-invite.is-locked{opacity:1}
.thj-invite .thj-body-copy{font-family:var(--display);font-size:17px;line-height:1.7;
  color:#EFE1C4;max-width:39ch}
.thj-invite .thj-hint{margin-top:18px;padding-top:16px;border-top:1px solid rgba(200,155,60,.25);
  font-size:14.5px;color:#AAB1B4;max-width:44ch}
.thj-code > div{border-color:#A97B2F;box-shadow:inset 0 0 22px rgba(0,0,0,.5)}

.thj-vault{border-color:rgba(227,190,114,.54);
  background:
    linear-gradient(90deg,rgba(3,12,18,.96),rgba(5,19,28,.89)),
    url('/images/about/origin-texture.jpg') center/cover}
.thj-vault__grid a{border-color:rgba(227,190,114,.28);background:rgba(3,12,18,.8)}

.thj-rules{
  background:
    linear-gradient(90deg,rgba(3,14,21,.96),rgba(4,17,25,.88)),
    url('/images/about/origin-texture.jpg') 45% center/cover;
}
.thj-rules__list{gap:0}
.thj-rules__list li{gap:14px;align-items:center;padding:12px 0}
.thj-rules__list li > span{display:grid;place-items:center;width:38px;height:38px;margin:0;
  border-radius:50%;border:1px solid #BC8F3E;box-shadow:inset 0 0 0 3px rgba(0,0,0,.5),
  0 3px 10px rgba(0,0,0,.4);font-family:var(--display);font-size:10px;color:#E6BD6B;
  background:radial-gradient(circle,#173040,#07131C 72%)}
.thj-rules__list li > p{flex:1;min-width:0}
.thj-check--rules,.thj-consent-rules{border-color:rgba(227,190,114,.4);
  background:rgba(2,10,16,.72);box-shadow:inset 0 0 24px rgba(0,0,0,.35)}
.thj-rules__where{margin-top:16px;padding:12px 14px;
  border:1px dashed rgba(200,155,60,.34);background:rgba(200,155,60,.05);
  font-size:14px;line-height:1.55;color:var(--dim)}
.thj-rules__where i{font-style:normal;color:var(--gold-lt)}

.thj-hunt-art{padding:9px;border-color:rgba(227,190,114,.54);
  box-shadow:0 22px 60px rgba(0,0,0,.62),inset 0 0 0 5px rgba(3,8,12,.72)}

@media (min-width:1100px){
  .thj-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch}
  .thj-grid__main > .thj-panel{height:100%}
  .thj-record{padding:clamp(30px,3vw,48px)}
}
@media (max-width:719px){
  .thj-body main{background-attachment:scroll}
  .thj-wrap{padding-inline:14px}
  .thj-panel{padding:24px 20px}
  .thj-panel__head h2{font-size:26px}
  .thj-record .thj-panel__head::before{font-size:25px;margin-right:8px}
  .thj-field__mark{width:22px;height:22px;font-size:14px}
  .thj-field input,.thj-field select{min-height:56px}
  .thj-crew-join,.thj-invite{min-height:0}
  .thj-rules__list li > span{width:34px;height:34px}
}
@media (max-width:520px){
  .thj-lamp{display:grid;grid-template-columns:20px minmax(0,1fr);gap:1px 8px;
    align-content:center;min-height:70px;padding:10px 11px}
  .thj-lamp span{grid-row:1 / span 2}
  .thj-lamp b{font-size:10.5px;line-height:1.25;white-space:normal}
  .thj-lamp i{margin:0;font-size:8.5px;line-height:1.2}
}