:root{
  --ink:#12161d; --paper:#ffffff; --panel:#f5f6f8;
  --rule:#dfe3ea; --muted:#606a7b;
  --brand:#1b2a4a; --brand-soft:#2c3f66; --accent:#9a7b2f;
  --sans:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.7 Georgia,"Iowan Old Style","Times New Roman",serif;
}
.wrap{max-width:860px; margin:0 auto; padding:0 26px}
a{color:var(--brand)}

/* ---------- masthead ---------- */
.masthead{background:var(--brand); color:#fff}
.masthead .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:22px 26px}
.brand{text-decoration:none; color:#fff; line-height:1.25}
.brand .of{display:block; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#a9b6d1}
.brand .nm{display:block; font-size:21px; letter-spacing:.02em; margin-top:3px}
.brand .role{display:block; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#a9b6d1; margin-top:5px}
.mast-tel{font-family:var(--sans); font-size:15px; color:#dbe2f0; text-decoration:none; white-space:nowrap}
.mast-tel:hover{color:#fff}

/* ---------- nav ---------- */
nav{background:var(--brand-soft)}
nav ul{display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0}
nav a{
  display:block; padding:15px 22px; color:#e6ecf8; text-decoration:none;
  font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:3px solid transparent;
}
nav a:hover,nav a:focus{background:var(--brand); color:#fff; border-bottom-color:rgba(227,196,106,.55)}
nav a[aria-current="page"]{background:var(--brand); color:#fff; border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--brand); color:#fff; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.20; filter:grayscale(35%)}
.hero .wrap{position:relative; padding:64px 26px; text-align:center}
.hero h1{margin:0; font-size:clamp(26px,5vw,38px); font-weight:400; line-height:1.22; letter-spacing:.02em}
.hero p{margin:18px auto 0; max-width:60ch; font-size:18px; color:#d3dbeb}
.rule{width:64px; height:2px; background:var(--accent); margin:24px auto 0}

/* ---------- page head ---------- */
.pagehead{background:var(--panel); border-bottom:1px solid var(--rule); padding:44px 0}
.pagehead h1{margin:0; font-size:clamp(25px,4.4vw,34px); font-weight:400; color:var(--brand); letter-spacing:.01em}
.pagehead p{margin:12px 0 0; color:var(--muted); max-width:66ch}

/* ---------- sections ---------- */
section{padding:48px 0; border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
h2{
  margin:0 0 22px; font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
h3{margin:0 0 8px; font-size:20px; color:var(--brand); font-weight:400}
p{max-width:70ch}

/* ---------- practice cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px}
.card{background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--brand); border-radius:3px; padding:22px}
.card h3{font-size:18px; margin-bottom:6px}
.card p{margin:0; font-size:15.5px; color:var(--muted)}

/* ---------- credentials ---------- */
.creds{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.creds li{display:flex; gap:16px; padding-bottom:14px; border-bottom:1px dotted var(--rule)}
.creds li:last-child{border-bottom:0; padding-bottom:0}
.creds .k{flex:0 0 190px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:5px}
.creds .v{flex:1}
.creds .v strong{font-weight:400; color:var(--brand); font-size:18px}
.creds .v span{display:block; font-size:15.5px; color:var(--muted)}

/* ---------- matters ---------- */
.matter{border-top:2px solid var(--brand); padding:20px 0 26px}
.matter h3{font-size:19px; margin-bottom:10px}
.matter p{margin:0; font-size:16.5px}
.matter .tag{
  display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}

/* ---------- disclaimer blocks ---------- */
.disclaimer{
  background:#fbf8f0; border:1px solid #e5d9b8; border-left:3px solid var(--accent);
  border-radius:3px; padding:16px 20px; margin:0 0 30px;
  font-family:var(--sans); font-size:14.5px; line-height:1.6; color:#5f4d1c;
}
.disclaimer strong{color:#4a3a08}

/* ---------- offices ---------- */
.offices{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:32px}
.office{border-top:2px solid var(--brand); padding-top:16px}
.office .where{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.office address{font-style:normal; font-size:17.5px; line-height:1.55}
.office .tel{margin-top:12px; font-size:17.5px}
.office .tel a{text-decoration:none; border-bottom:1px solid var(--rule)}
.office .tel a:hover{border-bottom-color:var(--brand)}
.office .fax{display:block; font-size:14.5px; color:var(--muted); margin-top:3px}

/* ---------- doc card ---------- */
.doc{display:block; background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:3px; padding:24px 26px; text-decoration:none; color:inherit}
.doc:hover{background:#eef0f4}
.doc .t{font-size:21px; color:var(--brand); margin-bottom:8px}
.doc .d{margin:0; font-size:15.5px; color:var(--muted)}
.doc .m{font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:12px}

/* ---------- footer ---------- */
footer{background:var(--brand); color:#b9c4dc; padding:34px 0 26px; font-size:14.5px; margin-top:0}
footer a{color:#dbe2f0}
.foot-firm{
  font-size:20px; color:#fff; letter-spacing:.02em; text-align:center;
  padding-bottom:22px; margin-bottom:30px; border-bottom:1px solid #2f4067;
}

/* two offices, equal weight — mirrors the Offices block on the home page */
.foot-offices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:34px; margin-bottom:30px;
}
.foot-office{border-top:2px solid var(--accent); padding-top:16px}
.foot-office .h{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#e3c46a; margin-bottom:10px;
}
.foot-office address{font-style:normal; line-height:1.65; font-size:16.5px; color:#e4eaf6}
.foot-tel{margin-top:12px; font-size:16.5px}
.foot-tel a{text-decoration:none; color:#fff; border-bottom:1px solid #3d5183}
.foot-tel a:hover{border-bottom-color:#e3c46a}
.foot-sub{font-size:14px; color:#9aa8c6; margin-top:4px}
.foot-sub a{color:#9aa8c6; text-decoration:none; border-bottom:1px solid #33456f}
.foot-sub a:hover{color:#dbe2f0}

/* site links as one horizontal row, out of the address grid */
.foot-links{
  list-style:none; margin:0 0 28px; padding:22px 0 0; border-top:1px solid #2f4067;
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center;
}
.foot-links a{
  text-decoration:none; font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#b9c4dc;
}
.foot-links a:hover{color:#fff}

.legal{border-top:1px solid #2f4067; padding-top:20px; font-size:13px; line-height:1.65; color:#9aa8c6}
.legal .adlabel{
  font-family:var(--sans); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#e3c46a; font-size:12px; display:block; margin-bottom:10px;
}
.legal p{max-width:none; margin:0 0 9px}

@media (max-width:600px){
  .creds li{flex-direction:column; gap:3px}
  .creds .k{flex:none; padding-top:0}
  .masthead .wrap{padding-top:18px; padding-bottom:18px}
  section{padding:38px 0}
}

/* ===================== essay: My Olympic Ordeal ===================== */

/* full-bleed cinematic opener */
.essay-hero{position:relative; min-height:clamp(340px,58vh,560px); display:grid; align-items:end; overflow:hidden; background:#0b1220}
.essay-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72}
.essay-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.10) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.94) 100%);
}
.essay-hero .inner{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 26px 52px; text-align:center; color:#fff}
.essay-hero .kicker{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:#e3c46a; margin-bottom:16px;
}
.essay-hero h1{
  margin:0; font-size:clamp(34px,7vw,62px); font-weight:400; line-height:1.06;
  letter-spacing:.01em; text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.essay-hero .dek{
  margin:18px auto 0; max-width:52ch; font-size:18px; line-height:1.6;
  color:#dbe3f2; text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* body */
.essay{max-width:690px; margin:0 auto; padding:54px 26px 0}
.essay p{max-width:none; margin:0 0 1.3em; font-size:18.5px; line-height:1.8}
.essay > p:first-of-type::first-letter{
  float:left; font-size:64px; line-height:.82; padding:6px 12px 0 0;
  color:var(--brand); font-weight:400;
}
.standfirst{
  font-size:19.5px; line-height:1.62; color:#44506a; font-style:italic;
  border-left:3px solid var(--accent); padding-left:22px; margin:0 0 38px;
}

/* figures — generous, soft-shadowed, captioned with a hairline */
.essay figure{margin:44px 0; text-align:center}
.essay figure img{
  max-width:100%; height:auto; border-radius:3px;
  box-shadow:0 14px 38px rgba(16,26,48,.20), 0 2px 6px rgba(16,26,48,.10);
}
.essay figcaption{
  font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--muted);
  margin:16px auto 0; max-width:56ch; position:relative; padding-top:14px;
}
.essay figcaption::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:36px; height:2px; background:var(--accent);
}

/* wider-than-text feature image */
.essay figure.wide{margin-left:calc(50% - 47vw); margin-right:calc(50% - 47vw); max-width:94vw}
.essay figure.wide img{width:100%}

/* paired / tripled photo rows */
.figrow{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:end}
.figrow img{width:100%; height:100%; object-fit:cover; border-radius:3px;
  box-shadow:0 10px 26px rgba(16,26,48,.18)}

/* dark interlude band for the dramatic imagery */
.interlude{background:#0f1728; color:#e8edf8; margin:56px 0; padding:52px 0}
.interlude figure{margin:0 auto; max-width:820px; padding:0 26px; text-align:center}
.interlude figure img{max-width:100%; height:auto; border-radius:3px; box-shadow:0 18px 48px rgba(0,0,0,.5)}
.interlude figcaption{
  font-family:var(--sans); font-size:13px; color:#9fb0d0; margin-top:18px;
  max-width:56ch; margin-left:auto; margin-right:auto; padding-top:14px; position:relative;
}
.interlude figcaption::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:36px; height:2px; background:#e3c46a;
}

.pullquote{
  margin:44px 0; padding:26px 0; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
  font-size:25px; line-height:1.42; color:var(--brand); text-align:center; font-style:italic;
}
.essay h2.part{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin:56px 0 22px; text-align:center; font-weight:700;
}
.essay h2.part::before,.essay h2.part::after{content:"—"; opacity:.55; margin:0 12px}

/* read / print bar */
.readbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
  max-width:690px; margin:0 auto 8px; padding:18px 22px; background:var(--panel);
  border:1px solid var(--rule); border-radius:4px;
}
.readbar .lbl{font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.btn{
  display:inline-block; font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.03em; text-decoration:none; padding:11px 20px; border-radius:3px;
  background:var(--brand); color:#fff; border:1px solid var(--brand); cursor:pointer;
}
.btn:hover{background:var(--brand-soft); color:#fff}
.btn.ghost{background:#fff; color:var(--brand)}
.btn.ghost:hover{background:#eef1f7; color:var(--brand)}

/* footnotes */
.fn{font-size:12.5px; vertical-align:super; line-height:0; text-decoration:none; padding:0 1px; color:var(--accent)}
.notes{max-width:690px; margin:56px auto 0; padding:26px 26px 0; border-top:1px solid var(--rule)}
.notes h2{margin-bottom:18px}
.notes ol{margin:0; padding-left:22px}
.notes li{font-size:14.5px; line-height:1.62; color:var(--muted); margin-bottom:13px}
.notes a{word-break:break-word}

@media (max-width:640px){
  .essay figure.wide{margin-left:0; margin-right:0; max-width:100%}
  .interlude{padding:38px 0; margin:40px 0}
  .essay{padding-top:38px}
}

@media print{
  .masthead,nav,footer,.readbar,.essay-hero::after{display:none !important}
  .essay-hero{min-height:0; background:none}
  .essay-hero > img{display:none}
  .essay-hero .inner{color:#000; padding:0 0 12px; text-align:left}
  .essay-hero h1{font-size:24pt; text-shadow:none}
  .essay-hero .dek{color:#333; text-shadow:none}
  .essay-hero .kicker{color:#666}
  body{font-size:11pt}
  .essay{max-width:none; padding:0}
  .essay figure,.interlude figure{page-break-inside:avoid}
  .essay figure img{box-shadow:none; border:1px solid #ccc}
  .interlude{background:none; color:#000; padding:0}
  .interlude figcaption{color:#555}
  a{color:#000; text-decoration:none}
}