/* angusthomaspaterson.com  ·  archive restoration
   Palette and structure carried over from the original angy child theme:
   accent #4fb5ec, ink #312018, body #636363, rules #e7e7e7, headphones motif.
   Type, measure and spacing rebuilt. Static, no build step, no JS. */

:root{
  --accent:#4fb5ec;
  --accent-dark:#2c93cb;
  --ink:#221a15;
  --body:#4a4a4a;
  --muted:#8a8a8a;
  --rule:#e7e7e7;
  --paper:#fff;
  --ground:#f4f4f2;
  --measure:37rem;
  --shell:70rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--body);
  font:400 1.0625rem/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover,a:focus-visible{color:var(--accent-dark);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.shell{max-width:var(--shell);margin:0 auto;background:var(--paper);
  box-shadow:0 0 0 1px var(--rule)}

/* ---------- masthead ---------- */
.masthead{padding:3rem 1.5rem 0;text-align:center;position:relative}
.masthead::before{content:"";position:absolute;left:0;right:0;top:0;height:132px;
  background:var(--bg-headphones) no-repeat center top;background-size:auto 132px;
  opacity:.34;pointer-events:none}
.wordmark{display:inline-block;position:relative;max-width:330px;width:70%}
.wordmark img{width:100%}
.tagline{margin:1rem auto 0;max-width:30rem;font-size:.8125rem;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.nav{display:flex;flex-wrap:wrap;gap:.25rem 2rem;justify-content:center;
  margin:2.25rem 0 0;padding:1rem 1.5rem;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);list-style:none}
.nav a{font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:.25rem 0}
.nav a:hover,.nav a[aria-current]{color:var(--ink);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--accent)}

/* social links sit in the header, as they did originally; the Contact page copy
   refers to "the social networks listed above" */
.social{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:center;
  margin:0;padding:.85rem 1.5rem;list-style:none;border-bottom:1px solid var(--rule)}
.social a{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.social a:hover{color:var(--accent-dark);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--accent)}
.nav{border-bottom:none}

/* ---------- homepage tile grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border-bottom:1px solid var(--rule)}
.tile{position:relative;display:block;overflow:hidden;background:#111;
  padding-top:62.5%;min-height:170px}

.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease,opacity .3s ease;opacity:.92}
.tile.rotate img{transform:rotate(-7deg) scale(1.25)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06);opacity:.6}
.tile.rotate:hover img{transform:rotate(-7deg) scale(1.32);opacity:.6}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.12) 42%,
    rgba(0,0,0,.62) 78%,rgba(0,0,0,.82) 100%)}
.tile-label{position:absolute;inset:auto 0 0;z-index:2;padding:1.25rem 1.25rem 1.1rem;
  color:#fff;text-decoration:none}
.tile:hover .tile-label,.tile:focus-visible .tile-label{color:#fff;text-decoration:none}
.tile-label h2{margin:0;font-size:1.375rem;line-height:1.15;font-weight:700;
  letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.75)}
.tile:hover::after,.tile:focus-visible::after{background:linear-gradient(180deg,
  rgba(79,181,236,.55),rgba(28,110,153,.85))}

/* ---------- intro: a grid cell beside the final tile ---------- */
.intro{background:var(--paper);
  padding:2.25rem 2rem 2rem 2.25rem;display:flex;align-items:flex-start}
.intro.span-1{grid-column:span 1}
.intro.span-2{grid-column:span 2}
.intro.span-3{grid-column:1 / -1}
.intro.span-1 p{font-size:.9375rem;line-height:1.55}
.intro p{margin:0;font-size:1.0625rem;line-height:1.62;color:var(--body);max-width:34rem}
.intro a{box-shadow:inset 0 -1px 0 var(--accent)}

/* the lead image: single.php rendered the featured image here, suppressed for
   the print-scan and video categories where the body already opens with art */
figure.lead{margin:0 auto 2.5rem;width:min(52rem,calc(100vw - 3rem))}
figure.lead img{width:100%}

/* The inthemix-era tiles are 620x722 rotated screenshot mockups. Held to the full
   measure they were upscaled by a third and stood almost 1000px tall; at their own
   scale they read as the designed artefact they are. */
figure.lead.mockup{width:min(26rem,calc(100vw - 3rem))}
/* Ibiza Voice published small pictures: 390 to 450px, where the standard hero is 832.
   Held to the full measure they upscale twofold and go soft against the type, so they
   are given the same narrow hero as the screenshot tiles, at native scale. */
figure.lead.narrow{width:min(26rem,calc(100vw - 3rem))}
/* not named .tile: that is the homepage grid cell, which crops to 62.5% and
   object-fits its image, and the class would have been inherited here. */

.byline .pub{color:var(--ink);font-weight:600}

/* ---------- article ---------- */
.article{padding:2.5rem 1.5rem 3rem}
.article-head{max-width:var(--measure);margin:0 auto 2rem}
.kicker{margin:0 0 .75rem;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-dark)}
.kicker a{color:inherit}
.subhead{margin:2.5rem 0 1rem;font-size:1.1875rem;line-height:1.3;font-weight:700;
  letter-spacing:-.005em;color:var(--ink)}
.subhead strong{font-weight:inherit}
.prose>.subhead:first-child{margin-top:0}
h1.title{margin:0;font-size:clamp(1.75rem,4.2vw,2.625rem);line-height:1.12;
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.byline{margin:1rem 0 0;font-size:.8125rem;letter-spacing:.04em;color:var(--muted)}
.byline time{font-variant-numeric:tabular-nums}

.prose{max-width:var(--measure);margin:0 auto}
.prose>*{margin:0 0 1.35rem}
.prose>:last-child{margin-bottom:0}
.standfirst{font-size:1.1875rem;line-height:1.55;color:var(--ink);font-weight:400}
.prose a{box-shadow:inset 0 -1px 0 var(--accent)}
.prose em{font-style:italic}
.prose strong{font-weight:600;color:var(--ink)}

blockquote.pullquote{margin:2.25rem 0;padding:0 0 0 1.25rem;
  border-left:3px solid var(--accent)}
blockquote.pullquote p{margin:0;font-size:1.3125rem;line-height:1.35;
  font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* figures break the measure, deliberately: much of this work was the images */
figure{margin:2.25rem 0;max-width:none;width:100%}
.prose figure{width:min(52rem,calc(100vw - 3rem));
  margin-left:calc(50% - min(26rem,calc(50vw - 1.5rem)));
  margin-right:0}
figure img{width:100%;background:var(--ground)}
figure a{box-shadow:none}
figcaption{margin-top:.6rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}
/* Two different things, which the old single rule conflated. figure.embed holds a
   third-party iframe with no intrinsic size, so it is held to 16:9 by aspect-ratio. A padding-top percentage would not do:
   it resolves against the containing block, not the figure, and these figures break
   out wider than the text measure. figure.video
   holds a local <video> that carries its own dimensions: giving that the zero-height
   box left an empty gap above every player. */
figure.embed{position:relative;aspect-ratio:16/9}
figure.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figure.video video{width:100%;height:auto;background:#000}

/* Photo credits that came in as the caption list of a flattened inthemix carousel.
   Set like a figcaption rather than body copy, since that is what they are. */
.prose p.credit{margin-top:-1.25rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}

/* ---------- Ibiza Voice's own typographic marks ----------
   Ibiza Voice marked its copy up heavily, and the meaning of those marks is part of
   how the pieces read: the interview question in bold, names and record titles set
   off from the sentence around them, a drop cap opening the piece, a pull quote
   floated beside the answer it comes from, tracklists, and a metadata block closing
   every review. The classes are carried over; the original stylesheet's blue and
   green boxes are not. */
/* The interview question. Ibiza Voice ran it inline with a line break before the
   answer, which reads as part of the same paragraph. Set as a block instead: same
   size as the body, sitting nearer the answer it belongs to than the one above. */
.prose .iv-q{display:block;margin:.55rem 0 .35rem;font-weight:700;color:var(--ink)}
.prose p:first-child .iv-q{margin-top:0}
.prose .iv-work{font-weight:600;color:var(--ink)}
.prose .iv-name{font-weight:600}
.prose .iv-speaker{font-weight:700;color:var(--ink)}

.prose .iv-dropcap{float:left;margin:.3rem .5rem 0 0;font-size:3.25rem;line-height:.72;
  font-weight:700;color:var(--accent-dark)}

/* The pull quote floats where there is room for it to and stacks where there is not.
   It repeats a line from the answer beside it, which is how it ran originally. */
.prose .iv-pull{display:block;margin:.2rem 0 1.1rem;padding-left:1rem;
  border-left:3px solid var(--accent);font-size:1.1875rem;line-height:1.4;
  font-weight:600;color:var(--ink)}
@media (min-width:48rem){
  .prose .iv-pull-right{float:right;width:42%;margin:.3rem 0 1rem 1.75rem}
  .prose .iv-pull-left{float:left;width:42%;margin:.3rem 1.75rem 1rem 0;
    padding:0 1rem 0 0;border-left:0;border-right:3px solid var(--accent)}
}
.prose figure{clear:both}

.prose .iv-subhead{display:block;margin:.5rem 0 .35rem;text-align:center;
  font-size:.9375rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--ink)}
.prose .iv-cent{display:block;text-align:center}

.prose .iv-track{display:block;font-size:.9375rem;line-height:1.7}
.prose .iv-track-head{display:block;margin:.9rem 0 .2rem;font-weight:700;color:var(--ink)}

/* The review's own metadata panel: artist, title, label, tracklist, rating. */
.prose .iv-rev{padding:1.25rem 1.4rem;background:var(--ground);border:1px solid var(--rule);
  font-size:.9375rem;line-height:1.6}
.prose .iv-rev-line{display:block;font-weight:700;color:var(--ink);line-height:1.55}
/* The panel's own line breaks are redundant once its spans are blocks, and left
   gaps where the original had none. */
.prose .iv-rev br{display:none}
.prose .iv-rev a{display:block;width:max-content;max-width:100%}
.prose .iv-rev a:first-of-type{margin-top:.9rem}
.prose .iv-rate-label{display:inline-block;margin-top:.9rem;font-weight:700;color:var(--ink)}
.prose .iv-rate-score{font-weight:700;color:var(--accent-dark)}

/* SoundCloud has no intrinsic aspect ratio: a single track is a fixed 166px strip and
   a set needs room for its tracklist, so neither can use the 16:9 rule above. */
figure.embed.audio{aspect-ratio:auto;height:166px}
figure.embed.audio-set{height:420px}
/* Spotify's own embed is 352px for a track, album or playlist. */
figure.embed.spotify{height:352px}

/* WordPress-era section breaks. Kept, since they are the author's own divisions, but
   set in the page's own terms rather than the browser default. Where one sits directly
   above a heading the heading already does the work, so the rule steps aside. */
/* Run-in headings: the WordPress-era habit of opening a paragraph with a bold line
   and a <br>. The break is gone from the markup, so this is what separates the
   heading from its section. No size increase; the space does the work. */
.prose p .runin{display:block;margin:1.15rem 0 .45rem;font-weight:700;color:var(--ink)}
.prose p:first-child .runin{margin-top:0}

.prose hr{border:0;border-top:1px solid var(--rule);margin:2.75rem 0}
.prose hr:has(+ h2),.prose hr:has(+ h3){display:none}

.image-missing{margin:2rem 0;padding:1.1rem 1.25rem;background:var(--ground);
  border:1px dashed #d6d6d2;color:var(--muted);font-size:.875rem;text-align:center}
.image-missing em{font-style:italic}

/* ---------- listings: category indexes and All Work ---------- */
.listing{padding:2.5rem 1.5rem 3rem}
.listing-head{max-width:var(--shell);margin:0 auto 2rem;text-align:center}
.pagetitle{margin:0;font-size:clamp(1.5rem,3.4vw,2.125rem);line-height:1.15;
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.blurb{margin:.6rem 0 0;font-size:.875rem;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem 1.5rem;
  list-style:none;margin:0;padding:0}
.card a{display:flex;flex-direction:column;height:100%;color:inherit}
.card a:hover,.card a:focus-visible{text-decoration:none}
.card-img{display:block;overflow:hidden;background:var(--ground);aspect-ratio:3/2}
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease,opacity .25s ease}
.card a:hover .card-img img,.card a:focus-visible .card-img img{transform:scale(1.05);opacity:.85}
.card-body{display:block;padding:.85rem 0 0}
.card-cat{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-dark);margin-bottom:.35rem}
.card h2{margin:0;font-size:1.0625rem;line-height:1.3;font-weight:600;
  letter-spacing:-.005em;color:var(--ink)}
.card a:hover h2{color:var(--accent-dark)}
.card-date{display:block;margin-top:.4rem;font-size:.75rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.card-blurb{display:block;margin-top:.55rem;font-size:.875rem;line-height:1.5;color:var(--ink,#221a15)}

/* ---------- prev/next, on posts and listings ---------- */
.postnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--shell);margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--rule)}
.article .postnav{max-width:var(--measure)}
.postnav a{font-size:.8125rem;line-height:1.35;color:var(--muted);max-width:20rem}
.postnav a:hover{color:var(--accent-dark)}
.postnav .prev::before{content:"\2190\00a0"}
.postnav .next{text-align:right}
.postnav .next::after{content:"\00a0\2192"}
.postnav .pageno{order:-1;flex:0 0 100%;text-align:center;font-size:.75rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:2rem 1.5rem 2.5rem;
  text-align:center;font-size:.8125rem;color:var(--muted)}
.foot p{margin:0}
.foot ul{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;padding:0;list-style:none}
.foot a{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.foot a:hover{color:var(--accent-dark)}

@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .intro,.intro.span-1,.intro.span-3{grid-column:span 2;padding:2rem 1.5rem}
  .nav{gap:.25rem 1.25rem}
}
/* the headphones motif is a wide fixed-height image; below this width it
   crops onto the wordmark and tagline, so it comes off entirely */
@media (max-width:700px){
  .masthead::before{display:none}
  .masthead{padding-top:2.25rem}
  .nav{gap:.15rem 1rem;padding:.85rem 1rem}
  .nav a{font-size:.75rem}
  .social{gap:.2rem 1rem;padding:.7rem 1rem}
}
@media (max-width:520px){
  body{font-size:1rem}
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:1.5rem}
  .listing{padding-left:1.15rem;padding-right:1.15rem}
  .intro,.intro.span-1,.intro.span-2,.intro.span-3{grid-column:span 1;padding:1.75rem 1.15rem}
  .tile{padding-top:50%}
  .masthead{padding-top:2rem}
  .article,.intro{padding-left:1.15rem;padding-right:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .tile img{transition:none}
}

/* A way back up the tree: article -> its category, category -> the homepage grid.
   Reuses the kicker's size and colour so it reads as the same piece of furniture. */
.upnav{padding:1.35rem 1.5rem 0}
.upnav .backlink{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-dark)}
.article,.listing{padding-top:1.5rem}
.backlink{display:inline-flex;align-items:center;gap:.4em}
.backlink span{font-size:1.15em;line-height:1;transition:transform .15s ease}
.backlink:hover span,.backlink:focus-visible span{transform:translateX(-.15em)}
@media (prefers-reduced-motion:reduce){.backlink span{transition:none}}
/* deep archive: wide banner at the top of a piece that has no picture of its own */
figure.lead.hero{margin:0 auto 2rem}
figure.lead.hero img{width:100%;height:auto}
/* photographs inside a recovered article, shown at their own size */
.prose figure.photo img{margin:0 auto}