/* Quay Diary: a harbourmaster's almanac. Ruled grids, dated entries, salt-faded colour. */
:root{
  --paper:#f1ebdd;
  --paper-deep:#e5dcc7;
  --ink:#1f3442;
  --ink-soft:#475c66;
  --rule:#a9a48f;
  --hair:#cfc8b3;
  --buoy:#a0432e;
  --glass:#5d8a85;
  --glass-wash:#dde0d0;
  --ochre:#b98d31;
  --serif:"Vollkorn",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.62 var(--serif);font-variant-numeric:oldstyle-nums}
img,svg{max-width:100%;display:block}
img{height:auto;background:var(--paper-deep)}
a{color:inherit;text-decoration-color:var(--buoy);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--buoy)}
a:focus-visible{outline:2px solid var(--buoy);outline-offset:2px}
h1,h2,h3{font-weight:600;line-height:1.14;margin:0;letter-spacing:-.005em}
p{margin:0 0 1em}
.tick{font:500 .72rem/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.jump{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:.5em 1em;font:500 .85rem var(--mono);z-index:5}
.jump:focus{left:8px}
.sheet{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}

/* Headboard: the almanac's title block, nav set as table columns */
.headboard{border-bottom:3px double var(--ink)}
.title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding-block:1.1rem .85rem;flex-wrap:wrap}
.nameplate{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.nameplate svg{width:46px;height:46px;flex:none}
.nameplate b{font:600 1.95rem/1 var(--serif);letter-spacing:.01em}
.title-row p{margin:0;max-width:27rem;text-align:right;font-style:italic;color:var(--ink-soft);font-size:1rem;line-height:1.35}
.columns{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);list-style:none;margin:0;padding:0}
.columns li{border-left:1px solid var(--hair)}
.columns li:first-child{border-left:0}
.columns a{display:block;padding:.45rem .7rem .55rem;text-decoration:none;font-size:1.02rem;line-height:1.25}
.columns a span{display:block;font:500 .62rem/1.5 var(--mono);letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase}
.columns a:hover{background:var(--glass-wash);color:var(--ink)}
.columns a[aria-current]{background:var(--ink);color:var(--paper)}
.columns a[aria-current] span{color:var(--paper-deep)}

/* Front page */
.frontispiece{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(1.75rem,4vw,3.25rem) 1.5rem;align-items:end}
.frontispiece h1{font-size:clamp(2.3rem,5.1vw,4.1rem);margin:.55rem 0 1rem}
.frontispiece .lede{font-size:1.24rem;line-height:1.5;max-width:32rem}
.plate{margin:0}
.plate-frame{position:relative;border:1px solid var(--ink);padding:6px;background:var(--paper)}
.plate-frame::after{content:attr(data-plate);position:absolute;top:6px;left:6px;background:var(--paper);padding:.15rem .55rem;font:500 .66rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.plate figcaption{font-size:.92rem;line-height:1.4;color:var(--ink-soft);margin-top:.5rem}
.plate figcaption small{display:block;font:400 .7rem/1.5 var(--mono);margin-top:.2rem}
.tide-band{border-block:1px solid var(--ink);background-color:var(--paper);background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:100% 25%,3.03% 100%;margin-bottom:clamp(2rem,4vw,3rem)}
.tide-band svg{width:100%;height:auto}
.tide-band text{font:500 11px var(--mono);fill:var(--ink)}
.tide-band .pin{fill:var(--buoy)}
.tide-band .pinno{fill:var(--paper);font-size:10.5px;text-anchor:middle}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:.4rem;margin-bottom:0}
.section-head h2{font-size:1.75rem}

/* The ledger: tide-table styling used for the contents and all data tables */
.ledger{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.42}
.ledger caption{text-align:left;font:500 .72rem/1.5 var(--mono);letter-spacing:.06em;color:var(--ink-soft);padding-bottom:.45rem;caption-side:top}
.ledger th{font:500 .68rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--ink);vertical-align:bottom}
.ledger td{padding:.6rem .7rem;border-bottom:1px solid var(--hair);vertical-align:top}
.ledger tbody tr:nth-child(even){background:rgba(93,138,133,.11)}
.ledger td+td,.ledger th+th{border-left:1px solid var(--hair)}
.ledger .fig{font-family:var(--mono);font-size:.9rem;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.table-scroll{overflow-x:auto;margin:1.4rem 0 1.6rem}
.contents td:nth-child(1){font:500 .9rem var(--mono);color:var(--buoy);width:3.2rem}
.contents td:nth-child(2){font:500 .85rem/1.45 var(--mono);width:8.4rem;white-space:nowrap}
.contents td:nth-child(3) a{font-size:1.3rem;font-weight:600;line-height:1.2;text-decoration:none}
.contents td:nth-child(3) a:hover{text-decoration:underline}
.contents td:nth-child(3) p{margin:.3rem 0 0;color:var(--ink-soft)}
.contents td:nth-child(4){font-style:italic;width:9.5rem}
.contents td:nth-child(5){font:400 .82rem var(--mono);width:5rem;white-space:nowrap}

.lower-deck{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.75rem,4vw,3.5rem);margin-block:clamp(2.25rem,5vw,4rem)}
.plate-run{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:1rem}
.plate-run .plate:nth-child(1){grid-column:span 6}
.plate-run .plate:nth-child(2),.plate-run .plate:nth-child(3){grid-column:span 3}
.orders{counter-reset:order;list-style:none;margin:1rem 0 0;padding:0}
.orders li{counter-increment:order;display:grid;grid-template-columns:2.3rem 1fr;padding:.6rem 0;border-bottom:1px solid var(--hair);line-height:1.42}
.orders li::before{content:counter(order,decimal-leading-zero);font:500 .85rem/1.7 var(--mono);color:var(--buoy)}
.notice{margin-top:1.75rem;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;padding:1rem 1.15rem;background:var(--paper-deep)}
.notice h3{font-size:1.25rem;margin:.2rem 0 .45rem}
.notice p:last-child{margin:0}

/* Diary index */
.month-rule{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.4rem;border-top:2px solid var(--ink);padding-block:1.1rem 2rem}
.month-rule>h2{font:500 .82rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--buoy)}
.logcard{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:1.25rem;align-items:start}
.logcard+.logcard{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--hair)}
.logcard img{border:1px solid var(--ink);padding:3px;background:var(--paper)}
.logcard h3{font-size:1.5rem;margin:.25rem 0 .4rem}
.logcard h3 a{text-decoration:none}
.logcard h3 a:hover{text-decoration:underline}
.logcard p{margin:0;color:var(--ink-soft)}

/* Article: a dated diary entry with a margin log */
.page-title{padding-block:clamp(1.6rem,4vw,3rem) 1.5rem}
.page-title h1{font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:21ch}
.crumbs{font:400 .74rem/1.5 var(--mono);color:var(--ink-soft);margin-bottom:1rem}
.entry-head{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1.4rem;padding-block:clamp(1.4rem,3.5vw,2.75rem) 1.4rem;align-items:start}
.dayblock{border:1px solid var(--ink);text-align:center;padding:.3rem .3rem .45rem;background:var(--paper-deep)}
.dayblock b{display:block;font:600 4.2rem/1 var(--serif);color:var(--buoy);font-variant-numeric:lining-nums}
.dayblock span{font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.entry-head h1{font-size:clamp(2rem,4.4vw,3.35rem);max-width:22ch}
.entry-head .standfirst{font-size:1.26rem;line-height:1.42;margin:.8rem 0 0;max-width:40rem;font-style:italic}
.entry-plate{margin:0 0 2rem}
.entry-plate img{width:100%}
.entry-grid{display:grid;grid-template-columns:9.5rem minmax(0,42rem);gap:1.4rem;padding-bottom:2.5rem}
.margin-log{font-size:.92rem;line-height:1.35;align-self:start;position:sticky;top:1rem}
.margin-log dl{margin:0;border-top:1px solid var(--ink)}
.margin-log dt{font:500 .64rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);padding-top:.55rem}
.margin-log dd{margin:0;padding-bottom:.55rem;border-bottom:1px solid var(--hair)}
.body-text h2{font-size:1.72rem;margin:2.1rem 0 .7rem}
.body-text h3{font-size:1.28rem;margin:1.5rem 0 .4rem}
.body-text>p:first-child{font-size:1.22rem;line-height:1.5}
.body-text ul,.body-text ol{padding-left:1.25rem;margin:0 0 1.1em}
.body-text li{margin-bottom:.45em}
.body-text .inset{margin:1.6rem 0}
.body-text .inset img,.body-text .inset svg{width:100%}
.warn{border-left:4px solid var(--buoy);padding:.7rem 1rem;background:var(--paper-deep);margin:1.4rem 0;font-size:1.03rem}
.warn strong{font-weight:600}
.diagram{border:1px solid var(--ink);background:var(--paper);padding:.5rem}
.diagram text{font-family:var(--mono);fill:var(--ink)}
.gazette h2{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;border-top:1px solid var(--ink);padding-top:.7rem}
.gazette h2 small{font:500 .7rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--buoy)}
.sources{border-top:3px double var(--ink);margin-top:2.5rem;padding-top:.9rem}
.sources h2{font:500 .76rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin:0 0 .6rem;color:var(--ink-soft)}
.sources ul{list-style:none;margin:0;padding:0;font-size:1rem}
.sources li{padding:.28rem 0;margin:0;border-bottom:1px solid var(--hair)}
.sources p{font-size:.92rem;color:var(--ink-soft);margin:.7rem 0 0}
.onward{background:var(--paper-deep);border-block:1px solid var(--ink);padding-block:1.25rem 1.5rem}
.onward ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem 2rem;margin:.7rem 0 0;padding:0}
.onward a{font-weight:600;font-size:1.15rem;line-height:1.25;text-decoration-color:var(--ink-soft)}
.onward small{display:block;font:400 .72rem/1.6 var(--mono);color:var(--ink-soft)}

/* Plain pages */
.plain{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);padding-bottom:3rem}
.plain h2{font-size:1.6rem;margin:2rem 0 .6rem}
.plain h2:first-child{margin-top:0}
.plain ul{padding-left:1.25rem}
.plain li{margin-bottom:.4em}
.sidenote{align-self:start;border:1px solid var(--ink);padding:1rem 1.1rem;font-size:1rem}
.sidenote h2{font:500 .72rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin:0 0 .5rem}
.credit-table td{font-size:.92rem}
.mailto{font:500 1.15rem var(--mono);word-break:break-word}
.fill{background:#f4dc9a;padding:0 .2em;font-family:var(--mono);font-size:.9em}

/* Colophon */
.colophon{border-top:3px double var(--ink);font-size:.98rem}
.colophon .sheet{display:flex;flex-wrap:wrap;gap:.8rem 2.5rem;justify-content:space-between;align-items:flex-start;padding-block:1.25rem 1.75rem}
.colophon p{margin:0;max-width:37rem;line-height:1.45}
.colophon ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0;font:400 .78rem/1.9 var(--mono)}

@media (max-width:900px){
  .frontispiece,.lower-deck,.plain{grid-template-columns:minmax(0,1fr)}
  .contents td:nth-child(4),.contents th:nth-child(4){display:none}
  .title-row p{text-align:left}
}
@media (max-width:680px){
  body{font-size:1.07rem}
  .columns{grid-template-columns:repeat(2,1fr)}
  .columns li{border-top:1px solid var(--hair)}
  .columns li:nth-child(odd){border-left:0}
  .columns li:first-child{grid-column:span 2;border-top:0}
  .columns li:nth-child(even){border-left:0}
  .columns li:nth-child(odd):not(:first-child){border-left:1px solid var(--hair)}
  .nameplate b{font-size:1.65rem}
  .contents,.contents tbody,.contents tr,.contents td{display:block;width:auto}
  .contents thead{display:none}
  .contents tr{display:grid;grid-template-columns:2.4rem minmax(0,1fr);padding:.7rem 0;border-bottom:1px solid var(--hair)}
  .contents td{border:0!important;padding:0}
  .contents td:nth-child(1){grid-row:span 2}
  .contents td:nth-child(3){grid-column:2}
  .contents td:nth-child(5){display:none}
  .contents td:nth-child(2){margin-bottom:.2rem}
  .entry-head{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .dayblock{display:flex;align-items:baseline;gap:.6rem;width:max-content;padding:.2rem .7rem}
  .dayblock b{font-size:2.2rem}
  .entry-grid{grid-template-columns:minmax(0,1fr)}
  .margin-log{position:static}
  .margin-log dl{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .month-rule{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .logcard{grid-template-columns:minmax(0,1fr)}
  .plate-run .plate:nth-child(n){grid-column:span 6}
  .ledger{font-size:.95rem}
  .ledger th,.ledger td{padding:.45rem .5rem}
  .tide-band text{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.columns,.onward{display:none}}