/* Oathwake page: the headline lines, the facts strip, numbered chapters and their six item layouts. Builds on the
   tokens, plates, buttons, pills, kickers and gallery in site.css; the hero shell (.ow-hero, .ow-lead, .ow-meta) is there too. */

/* hero */
.ow-title{font-size:clamp(3.4rem, 11vw, 8.6rem)}
.ow-lines{font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem, 3.4vw, 2.7rem); line-height:1.08; margin:0 0 22px; color:var(--fg); max-width:36ch}
.ow-lines span{display:block}
.ow-lines .hot{color:var(--aurora); text-shadow:0 0 28px rgba(116,214,166,.35)}
.ow-hero .actions{margin-top:28px}

/* facts strip */
.ow-facts{border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--bg), var(--bg-2))}
.ow-facts dl{margin:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.ow-facts dl > div{background:var(--bg); padding:22px 20px; transition:background .3s}
.ow-facts dl > div:hover{background:var(--bg-2)}
.ow-facts dt{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin:0}
.ow-facts dd{margin:8px 0 0; font-family:var(--f-display); font-size:clamp(1.2rem, 1.7vw, 1.5rem); line-height:1.05; font-weight:700; color:var(--ember-hot)}
@media (max-width:1040px){.ow-facts dl{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width:620px){.ow-facts dl{grid-template-columns:repeat(2, minmax(0,1fr))} .ow-facts dl > div:last-child:nth-child(odd){grid-column:1 / -1}}

/* chapter header: the outlined number beside the kicker and title */
.ow-ch-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px 28px; align-items:end; margin-bottom:40px}
.ow-num{font-family:var(--f-display); font-size:clamp(3.6rem, 8vw, 6.4rem); line-height:.8; font-weight:800; color:var(--ember-deep); -webkit-text-stroke:1px var(--ember); -webkit-text-fill-color:transparent; text-shadow:0 0 30px rgba(226,119,46,.22)}
.ow-ch-head .title{margin:0}

/* banner: a wide zoomable picture in a plate */
.ow-banner{margin:0 0 40px}
.ow-banner .plate-in button,.ow-aside .plate-in button{display:block; width:100%; padding:0; border:0; background:var(--bg-2); cursor:zoom-in; overflow:hidden}
.ow-banner img{display:block; width:100%; height:auto; max-height:clamp(260px, 58vh, 640px); object-fit:cover; transition:transform .8s}
.ow-banner .plate:hover img{transform:scale(1.02)}
.ow-banner figcaption,.ow-aside figcaption{font-family:var(--f-mono); font-size:.72rem; color:var(--fg-dim); margin-top:10px}

/* body: intro and items, with an optional tall picture beside them */
.ow-ch-body{display:grid; gap:40px}
.ow-ch-body.has-aside{grid-template-columns:minmax(0,1fr) minmax(200px, 280px); align-items:start}
.ow-aside{margin:0; position:sticky; top:84px}
.ow-aside img{display:block; width:100%; height:auto}
.ow-ch-text{max-width:68ch}
.ow-ch-text p{font-size:var(--step-1); line-height:1.5; color:var(--fg); margin:0 0 16px}
.ow-ch-text p:last-child{margin-bottom:0}
.ow-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.ow-chip{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--frost); padding:8px 12px; box-shadow:inset 0 0 0 1px rgba(140,195,212,.45)}
.ow-ch-text + .ow-items,.ow-ch-text + .ow-tiles,.ow-items + .ow-tiles{margin-top:40px}
@media (max-width:860px){.ow-ch-body.has-aside{grid-template-columns:minmax(0,1fr)} .ow-aside{position:static; max-width:280px}}

/* grid: tiles with a title and a line */
.ow-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.ow-tile .plate-in{padding:24px 22px 26px; gap:8px}
.ow-tile .plate-in::before{content:""; width:28px; height:2px; background:var(--ember); margin-bottom:6px}
.ow-tile h3{font-family:var(--f-display); font-size:1.7rem; line-height:1; margin:0; font-weight:700}
.ow-tile p{margin:0; color:var(--fg-dim)}
@media (max-width:1040px){.ow-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.ow-grid{grid-template-columns:minmax(0,1fr)}}

/* cards: picture, title, text */
.ow-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:18px}
.ow-card figure{margin:0}
.ow-card figure button{display:block; width:100%; padding:0; border:0; background:var(--bg-2); cursor:zoom-in; aspect-ratio:16 / 10; overflow:hidden; border-bottom:1px solid var(--line)}
.ow-card figure img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s}
.ow-card:hover figure img{transform:scale(1.04)}
.ow-card-body{padding:22px 24px 26px; display:grid; gap:8px; align-content:start}
.ow-card h3{font-family:var(--f-display); font-size:2rem; line-height:1; margin:0; font-weight:700}
.ow-card p{margin:0; color:var(--fg-dim)}
.ow-card.text .ow-card-body{padding-top:26px}
.ow-card.text h3{color:var(--ember-hot)}

/* steps */
.ow-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.ow-step .plate-in{padding:24px 22px 26px; gap:8px}
.ow-step-n{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-hot)}
.ow-step h3{font-family:var(--f-display); font-size:1.9rem; line-height:1; margin:4px 0 0; font-weight:700}
.ow-step p{margin:0; color:var(--fg-dim)}
@media (max-width:1040px){.ow-steps{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.ow-steps{grid-template-columns:minmax(0,1fr)}}

/* columns: a title, a lead line and bullet lines */
.ow-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.ow-col{background:var(--bg); padding:28px 26px 30px}
.ow-col h3{font-family:var(--f-display); font-size:2rem; line-height:1; margin:0; font-weight:700; color:var(--ember-hot)}
.ow-col:first-child h3{color:var(--aurora)}
.ow-col-lead{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--frost); margin:8px 0 18px}
.ow-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; color:var(--fg-dim)}
.ow-col li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:6px}
.ow-col li::before{content:"ᚲ"; font-family:var(--f-rune); color:var(--ember)}
@media (max-width:860px){.ow-cols{grid-template-columns:minmax(0,1fr)}}

/* rows: a ledger of name, note and arrow */
.ow-rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.ow-rows li{border-bottom:1px solid var(--line)}
.ow-row{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr) 28px; gap:18px; align-items:baseline; padding:18px 4px; color:inherit; text-decoration:none; transition:background .25s}
a.ow-row:hover{background:var(--bg-2)}
.ow-row-nm{font-family:var(--f-display); font-size:1.6rem; line-height:1; font-weight:700; color:var(--fg)}
a.ow-row:hover .ow-row-nm{color:var(--ember-hot)}
.ow-row-nt{color:var(--fg-dim)}
.ow-row .ar{color:var(--ember-hot); text-align:right}
@media (max-width:640px){.ow-row{grid-template-columns:minmax(0,1fr) 28px} .ow-row-nt{grid-column:1 / -1}}

/* faq */
.ow-faq{display:grid; gap:12px}
.ow-q{background:var(--plate); box-shadow:inset 0 0 0 1px var(--line)}
.ow-q summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; cursor:pointer}
.ow-q summary::-webkit-details-marker{display:none}
.ow-q h3{font-family:var(--f-display); font-size:1.7rem; line-height:1; margin:0; font-weight:700}
.ow-q-mark{font-family:var(--f-mono); color:var(--ember-hot); font-size:1.2rem; transition:transform .3s}
.ow-q[open] .ow-q-mark{transform:rotate(45deg)}
.ow-q p{margin:0; padding:0 22px 22px; color:var(--fg-dim); max-width:68ch}

/* tiles: the class names */
.ow-tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:12px}
.ow-tiles li{font-family:var(--f-display); font-size:1.5rem; font-weight:700; line-height:1; padding:18px 16px; box-shadow:inset 0 0 0 1px var(--line-2); display:flex; align-items:center; gap:10px; transition:box-shadow .25s, color .25s}
.ow-tiles li:hover{box-shadow:inset 0 0 0 1px var(--ember); color:var(--ember-hot)}
.ow-tiles .rn{color:var(--aurora); font-size:1.2rem}

/* gallery, outro, footnote */
.ow-gallery{margin-top:40px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr))}
.ow-outro{margin-top:40px; padding-left:22px; border-left:2px solid var(--ember); max-width:68ch; display:grid; gap:14px}
.ow-outro p{margin:0; color:var(--fg-dim); font-size:1.08rem}
.ow-note{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--fg-faint); margin:28px 0 0}