/* Colours measured from photographs of Praia do Beliche, Sagres: sea, sand warmed to gold, and cliff. */
:root{
  --ground:#F4ECDC;--paper:#FFFCF5;--ink:#2B2720;--muted:#625A4C;--rule:#DCCDB0;--sea:#1D5F73;--sand:#94702A;--silver:#756C5A;
  --foot:#3D372D;--foot-text:#EFE4CE;
  --step:48px;--verse:"Newsreader","Times New Roman",serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#10303A;--paper:#183E4A;--ink:#F4EEE2;--muted:#C9C0AD;--rule:#35606C;--sea:#94D0E0;--sand:#E0C283;--silver:#B5AA94;--foot:#0A2129;--foot-text:#E8DEC9}
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--verse)}
a{color:var(--sea)}
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding:36px 0 28px}
.mark{font-size:34px;font-weight:700;line-height:1;text-decoration:none;letter-spacing:.01em}
.sand{color:var(--sand)}.sea{color:var(--sea)}.silver{color:var(--silver);letter-spacing:-.08em}
.sub{margin:8px 0 0;font:400 13px var(--mono);letter-spacing:.14em;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.nav a{display:inline-block;padding:12px 0;font:400 13px var(--mono);letter-spacing:.26em;text-decoration:none}
.nav a:hover{text-decoration:underline}
.lede{margin:24px 0 44px;max-width:900px;font-size:34px;line-height:1.22}
.h{margin:28px 0 8px;font-size:52px;line-height:1.05;font-weight:700}
.subhead{margin:0 0 32px;font:400 13px/1.6 var(--mono);color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.col{display:block;padding:20px 24px 22px 0;color:inherit;text-decoration:none}
.col strong{display:block;font-size:20px;line-height:1.2}
.col:hover strong{color:var(--sea)}
.col span{display:block;margin-top:6px;font:400 12px/1.5 var(--mono);color:var(--muted)}
.band{margin:40px 0 20px;font:400 13px var(--mono);letter-spacing:.26em;color:var(--muted)}

/* Tiles: JavaScript sets exact row spans; the build's estimate holds without it. */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;grid-auto-rows:8px;grid-auto-flow:dense}
.tile{display:flex;flex-direction:column;min-width:0;margin-bottom:24px;padding:24px 20px 20px;background:var(--paper);border:1px solid var(--rule);border-radius:2px}
.wide{grid-column:span 2}
.t{margin:0;font-size:16px;line-height:22px;font-weight:700}
.t a{color:inherit;text-decoration:none}
.t a:hover{text-decoration:underline}
.m{margin:2px 0 16px;font:400 11.5px/18px var(--mono);color:var(--muted)}
.f{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px}
.more{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:500 12.5px var(--mono);color:var(--sea);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.more[hidden]{display:none}
.n{font:400 11.5px var(--mono);color:var(--muted)}

/* Verse. Each editor paragraph is one line; a word after a tab sits at the stop in its box. */
/* A verse that wraps sits closer to itself than to the next verse, and its continuation is indented
   off the tab grid, so it can't be mistaken for a line the poet tabbed in. Verses are still 1.45 apart. */
.poem{--hang:calc(.75*var(--step));font-size:16px;line-height:1.25;font-kerning:normal}
.l{--pad:calc(var(--lead,0)*var(--step) + var(--hang));display:block;margin:0 0 .2em calc(var(--ml,0)*var(--step));min-height:1.25em;padding-left:var(--pad);white-space:pre-wrap;text-indent:calc(var(--ti,0)*var(--step) - var(--pad))}
.l.nohang,.about .l{padding-left:0;text-indent:calc(var(--ti,0)*var(--step))}
/* A turnover, set by turnover.js. The bracket is display only, so it stays out of copied text. */
.turned{text-align-last:right}
.turned .g{text-align-last:left}
.turnover-mark::before{content:"[";content:"[" / "";color:var(--muted)}
.g{display:inline-block;min-width:calc(var(--k)*var(--step));padding-right:.3em;text-indent:0;white-space:pre-wrap;vertical-align:baseline}
.tc{font-size:0;tab-size:0}
.center{text-align:center}.right{text-align:right}.justify{text-align:justify}
.fn{font-size:.72em;line-height:0}

/* Poem page */
.reader{max-width:680px;padding:12px 0 8px}
.crumb{margin:0 0 20px;font:400 13px var(--mono)}
.crumb a{display:inline-block;padding:12px 0}
.ptitle{margin:0 0 6px;font-size:30px;line-height:1.15;font-weight:700}
.psub{margin:0 0 4px;font-size:18px;font-style:italic;color:var(--muted)}
.scroller{margin-top:24px}
.phead{margin:28px 0 12px;font-size:16px;line-height:22px;font-weight:700}
.notes{margin:32px 0 0;padding:16px 0 0 20px;border-top:1px solid var(--rule);font-size:14px;line-height:1.4}
.turn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:36px}
.turn a{display:inline-flex;align-items:center;min-height:44px;font:500 13px var(--mono);text-underline-offset:3px}
.contents .gname{margin:24px 0 8px;font-size:18px}
.index{margin:0;padding:0;list-style:none;column-count:3;column-gap:24px}
.index li{break-inside:avoid;margin:0 0 8px;font-size:16px;line-height:1.3}
.index a{color:inherit;text-decoration:none}
.index a:hover{color:var(--sea);text-decoration:underline}
.about .l{padding-bottom:.5em}

/* Strollscroll: every published poem, one after another */
.stroll{max-width:680px}
.stroll .piece{padding:32px 0 40px;border-bottom:1px solid var(--rule)}
.stroll .piece:last-child{border-bottom:0}
.piece .ptitle{font-size:24px}
.piece .ptitle a{color:inherit;text-decoration:none}
.piece .ptitle a:hover{text-decoration:underline}

/* Facing pages: an open book, two poems at a time */
.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px;background:var(--paper);border:1px solid var(--rule);border-radius:2px}
.book .page{min-width:0;padding:40px 24px 48px}
.book .page + .page{border-left:1px solid var(--rule)}
.book .ptitle{margin-bottom:20px;font-size:20px}
@media (max-width:1319px){.book{grid-template-columns:minmax(0,1fr)}.book .page + .page{border-left:0;border-top:1px solid var(--rule)}}
.foot{margin-top:40px;padding:24px 0 32px;font:400 12px var(--mono);background:var(--foot);color:var(--foot-text);box-shadow:0 0 0 100vmax var(--foot);clip-path:inset(0 -100vmax)}

@media (max-width:1319px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.lede{font-size:30px}.index{column-count:2}.h{font-size:42px}}
@media (max-width:759px){
  .wrap{padding:0 16px}
  .tiles{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;grid-auto-flow:row}
  .tile{grid-row:auto !important;grid-column:auto !important;padding-left:16px;padding-right:16px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .lede{font-size:25px}.mark{font-size:29px}.top{padding-top:24px}.h{font-size:34px}.index{column-count:1}
  /* The least change that fits, chosen per poem by the build. */
  .phone-half-stops{--step:24px}
  .phone-half-stops-small{--step:21px}
  .phone-half-stops-small .poem{font-size:14px}
  .phone-wrap,.reader.phone-page:not(.page-view){--step:24px}
  .phone-wrap .g,.reader.phone-page:not(.page-view) .g{max-width:100%}
  /* Page view: the exact layout at full stops, swiping sideways inside its own frame. */
  .reader.page-view{--step:48px}
  .page-view .scroller,.tile.phone-page .poem,.piece.phone-page .poem{overflow-x:auto}
  .page-view .l,.tile.phone-page .l,.piece.phone-page .l{width:max-content;white-space:pre;padding-left:0;text-indent:calc(var(--ti,0)*var(--step))}
  .page-view .g,.tile.phone-page .g,.piece.phone-page .g{white-space:pre;text-indent:0;max-width:none}
  .book .page{padding:24px 16px 32px}
}
@media print{
  .top,.nav,.turn,.crumb,.foot,.pv{display:none}
  body{background:#fff;color:#000}
  .wrap{padding:0}.reader{max-width:none}
}