/* ==========================================================================
   UT Austin Villa — re-skin.

   Same design system as the LARG rebuild (warm paper ground, serif prose,
   burnt orange used sparingly) adapted to a twenty-year competition archive.

   Constraint: the source HTML cannot be edited. It is 2004-era markup — <u>
   inside headings, <center> nested in <p>, bare text nodes with no wrapper,
   float divs, 635 <dd> elements, <object>/<embed> video, inline width styles.
   This file has to make that legible exactly as it stands.

   LAYOUT NOTE. An earlier version used a CSS grid to let figures break out of
   the prose measure. That was wrong for this content: float has no effect on a
   grid item, so every .imgboxrt/.imgboxlft stopped wrapping, and every bare
   text node became its own anonymous grid item stranded in a narrow column.
   Normal block flow is the correct choice here — the archive depends on floats.
   ========================================================================== */

:root{
  --bg:#fdfcfa; --ink:#1a1a18; --ink-muted:#5d5a54; --rule:#e3ded5;
  --accent:#bf5700;         /* UT burnt orange */
  --accent-ink:#9e4700;
  --shade:#f4f1ea;

  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,"Source Serif 4",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --measure:46rem;          /* ~78 characters; 52rem measured 88-91 */
  --wide:58rem;
  --gutter:1.25rem;
  --trim:calc(var(--measure) + var(--gutter)*2);
  /* How far figures/tables may bleed past the prose column. Reserves two
     gutters so it never pushes past the viewport, even with a scrollbar. */
  --bleed:max(0px, min((var(--wide) - var(--measure)) / 2,
                       (100vw - var(--gutter) * 2 - var(--measure)) / 2));
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16130f; --ink:#e8e4dc; --ink-muted:#a9a39a; --rule:#332e27;
        --accent:#f08a3c; --accent-ink:#f2a469; --shade:#211d18;}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
     font-size:1.125rem;line-height:1.6;text-rendering:optimizeLegibility}

/* --- Frame ---------------------------------------------------------------- */
.masthead,.colophon,.snapshot,.page{
  max-width:var(--trim);margin-inline:auto;padding-inline:var(--gutter)}
.masthead{padding-block:1.3rem .9rem;border-bottom:1px solid var(--rule)}
.masthead__mark{display:block;font-size:1.35rem;color:var(--accent);
  text-decoration:none;margin-bottom:.5rem}
.masthead__nav{display:flex;flex-wrap:wrap;gap:.35rem 1.05rem;
  font-family:var(--sans);font-size:.8125rem;letter-spacing:.01em}
.masthead__nav a{color:var(--ink-muted);text-decoration:none;padding-block:.15rem}
.masthead__nav a:hover{color:var(--accent-ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:.2em}

.colophon{margin-top:4rem;padding-block:1.5rem 2.5rem;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.8125rem;line-height:1.6;color:var(--ink-muted)}
.colophon p{margin:0 0 .4rem}
.colophon__note{font-style:italic}

/* The rotating team photo. Every image in images/randompics is 160x165 (a couple
   are 158x164), and the original stylesheet pinned #randompic to exactly that box.
   Never scale them up: width:100% was stretching a 160px photo to 352px and
   softening it badly. Cap at intrinsic size and let small viewports shrink it. */
.snapshot{margin-top:3.5rem}
.snapshot img{display:block;width:auto;height:auto;
  max-width:min(160px,100%)!important;   /* beats the blanket img !important below */
  border:1px solid var(--rule)}
.snapshot:empty{display:none}

/* --- Content --------------------------------------------------------------
   Plain block flow. Long unbroken URLs appear as link text throughout the
   publication lists and would otherwise force a horizontal scrollbar. -------- */
.page{padding-top:2.75rem;overflow-wrap:break-word}
.page::after{content:"";display:block;clear:both}

/* Prose stays narrow; figures, tables and embeds reach wider. Plain negative
   margins, not a grid -- a grid would kill the floats this archive depends on. */
.page>table,.page>.imgbox,.page>center,.page>hr,.page>iframe{
  width:calc(100% + var(--bleed) * 2);
  max-width:none!important;
  margin-inline:calc(var(--bleed) * -1);}

/* --- Type ----------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);line-height:1.22;margin:0;clear:both}
h1{font-size:1.95rem;font-weight:600;letter-spacing:-.01em;margin:0 0 1.3rem}
h2{font-size:1.4rem;font-weight:600;margin:2.7rem 0 .7rem}
h3{font-size:1.15rem;font-weight:700;margin:1.9rem 0 .5rem}
h4{font-size:1.125rem;font-weight:600;font-style:italic;margin:1.5rem 0 .4rem}

/* The archive wraps most headings in <u>, many in <b>. Underlined headings read
   as 1998; strip the decoration and let size and weight carry the hierarchy. */
h1 u,h2 u,h3 u,h4 u{text-decoration:none}
h1 b,h2 b,h3 b,h4 b{font-weight:inherit}

p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.4em}
li{margin-bottom:.4em}
/* Publication and news entries are multi-line <li> separated only by <br>.
   Without extra space between items they run together into a wall of text. */
li:has(br){margin-bottom:1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0;clear:both}
center{display:block;margin:1.4rem 0}
b,strong{font-weight:600}

a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:.07em;text-underline-offset:.14em}
a:hover{color:var(--accent-ink);text-decoration-thickness:.12em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- Definition lists -----------------------------------------------------
   <dl> carries two completely different things in this archive: terse match
   results ("Score: 6-0.") and multi-paragraph prose — member biographies,
   project descriptions, competition summaries, the entire home-page news list.
   So <dd> must be styled as ordinary prose. Only genuinely score-shaped lines
   get the compact treatment, via the .score hook where markup allows it. ---- */
dl{margin:1.1rem 0 1.8rem}
dt{font-weight:600;margin-top:1.1rem}
dd{margin:.35rem 0 .9rem 1.5rem;color:inherit;font-family:inherit;font-size:inherit}
dd p{margin:0 0 .7rem}
dd:last-child{margin-bottom:0}
/* Competition pages put <h3> inside <dl> — invalid, but it is what is there, and
   it appears in no prose <dl> anywhere, so it identifies a fixture list. Tighten
   score/video onto their match and open a real gap between matches. */
dl:has(h3) dt{margin-top:1.5rem}
dl:has(h3) dd{margin:.1rem 0 0 1.5rem;font-variant-numeric:tabular-nums}
/* A round label is apparatus, not a heading; at 1.15rem/700 it was
   indistinguishable from the 1.125rem/600 dt beneath it. */
dl h3{font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);
  margin:2.4rem 0 .7rem}
/* Some pages close a <dd> and then continue with <p> siblings inside the <dl>. */
dl>p{margin:.35rem 0 .9rem 1.5rem}

/* --- Figures --------------------------------------------------------------
   Floats are load-bearing here: .imgboxrt/.imgboxlft wrap text around photos
   on the league and @Home pages. They only work because .page is block flow. */
.imgbox,.imgboxrt,.imgboxlft,.pic{margin:1.4rem 0}
.imgbox{text-align:center}
.imgboxrt{float:right;max-width:min(20rem,45%);margin:.3rem 0 1.1rem 1.6rem}
.imgboxlft{float:left;max-width:min(20rem,45%);margin:.3rem 1.6rem 1.1rem 0}
.imgbox img,.imgboxrt img,.imgboxlft img{
  max-width:100%;height:auto;display:block;border:1px solid var(--rule)}
.imgbox img{margin-inline:auto}
.caption{font-family:var(--sans);font-size:.8125rem;line-height:1.45;
  color:var(--ink-muted);margin-top:.45rem}
/* Half the archive's captions are <span>, where margin-top is inert. Scoped to
   figure wrappers only -- .caption is also used inline mid-sentence elsewhere. */
.imgbox .caption,.imgboxrt .caption,.imgboxlft .caption,
.box .caption,.pic .caption{display:block}
/* .pic is a thumbnail link: <a class="pic"><img><br>Name</a>. Keeping the image
   inline-level stops a stray blank line opening up between photo and caption. */
.pic img{max-width:100%;height:auto;display:inline-block;vertical-align:top;
  border:1px solid var(--rule)}
.readmore{font-family:var(--sans);font-size:.8125rem;color:var(--ink-muted);
  margin:.4rem 0 1.6rem}
.bibtex{font-family:var(--sans);font-size:.8125rem;background:var(--shade);
  padding:.9rem 1.1rem;overflow-x:auto}
/* The downloads gallery wraps every thumbnail in <div class="box">. */
.box{display:inline-block;vertical-align:top;margin:.5rem .7rem .5rem 0;
  max-width:100%;font-family:var(--sans);font-size:.8125rem;color:var(--ink-muted)}
.box{margin-inline:.35rem}
/* Same defect already fixed for .pic: a block <img> inside the inline <a>
   splits the inline box, stranding an empty line above every caption. */
.box img{border:1px solid var(--rule);max-width:100%;height:auto;
  display:inline-block;vertical-align:top}
/* Two members have no homepage, so their photo is a bare <img> in the <dt>
   and misses the .pic img frame the other 25 get. */
#members dt img{display:inline-block;vertical-align:top;border:1px solid var(--rule)}

/* Inline width attributes in the source (style="max-width:500px", width="560")
   overflow narrow viewports. The cap has to win against an inline style. */
img,object,embed,video,iframe{max-width:100%!important}
img{height:auto}


/* The @Home year selector. The markup is <center><ul class="year-choice">, so the list
   fills the content width: <center> centres the text but the bullet markers stay pinned
   at the far left. It is a year picker, not prose -- set it as one horizontal row. */
.year-choice{list-style:none;padding:0;margin:1.3rem 0 1.8rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;
  font-family:var(--sans);font-size:.9375rem}
.year-choice li{margin:0}
.year-choice a{text-decoration-thickness:.08em}

/* --- Tables --------------------------------------------------------------- */
table{border-collapse:collapse;max-width:100%;margin:1.5rem 0;
  font-family:var(--sans);font-size:.875rem}
th,td{text-align:left;padding:.45rem .7rem;border-bottom:1px solid var(--rule);
  vertical-align:top}
th{font-weight:600;color:var(--ink)}
td{color:var(--ink-muted)}
/* Several pages use tables purely to lay images out side by side. */
table:has(img){width:100%}
table:has(img) td,table:has(img) th{border:0;padding:.4rem;color:inherit;
  text-align:center}

/* --- Embedded video -------------------------------------------------------
   Every iframe in the archive sits inside a bare <p>, so it can never be
   targeted as a child of .page. Style the element itself. */
/* All 23 iframes are YouTube embeds carrying literal width/height attributes;
   max-width alone leaves height="340" intact so the player squashes. */
iframe{border:0;margin:1.4rem 0;display:block;width:100%;aspect-ratio:16/9;height:auto}
p:has(>iframe),p:has(>object),p:has(>embed){margin-block:1.4rem}

@media print{
  .masthead__nav,.snapshot{display:none}
  body{background:#fff;color:#000;font-size:10.5pt}
  a{text-decoration:none}
}