/* Anton Alexander Palmer (.net) - property and development.

   A white bar, a white hero with a framed portrait on the LEFT, then an
   umber band, then a dense body. The figure is on the left because the
   other two domains both carry it on the right, and it is the second
   supplied frame of him, framed rather than cut out.

   This started as candidate B on a petrol band, then a clay one. Both were
   mid-tone grounds forced by one constraint: a flat dark band separated his
   navy suit by only about 1.8 to 2.2:1, so the shoulders vanished into it.
   A framed plate carries its own background, so that constraint died with
   the cut-out and the hero is simply paper white now. Tom read the clay as
   beige, which it was.

   Measured on paper: ink 18.69:1, body 12.05:1, umber accent 8.91:1, and
   white on the umber band 8.91:1. */
:root {
    --clay:   #c9b8a8;   /* now only the hover fill on the pill */
    --dark:   #2f2a24;   /* his words */
    /* The accent. Umber, chosen by Tom over oxblood and brick. It sits in
       the same warm-brown family as .com's ground, so this domain is kept
       apart by everything else instead: a white ground rather than a dark
       one, a framed portrait rather than a cut-out, Figtree rather than
       Fraunces, and the figure on the left. Measured: white on it 8.91:1,
       and it reads 7.99:1 against the wash band. */
    --umber:  #5a4632;
    --ink:    #141210;
    --body:   #3c352f;
    --quiet:  #5b5249;   /* white and wash grounds only */
    --line:   #e2ded8;
    --paper:  #ffffff;
    --wash:   #f6f3ef;

    --sans: 'Figtree', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--umber); outline-offset: 2px; }
::selection { background: var(--umber); color: #fff; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--ink); color: #fff; padding: 12px 20px; font-size: 14px; }
.skip-link:focus { left: 0; }

.wrap { max-width: 1300px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 48px); width: 100%; }

/* ── White bar above the colour band ──────────────────────────────── */
/* one page, so the right of the bar states the subject rather than
   carrying a two-item nav that has nowhere to go */

/* ── Hero: flat clay, him cut out and clipped by the band ─────────── */
/* ── Hero: a framed portrait on the left, the copy on the right ───────
   This was a flat clay band with a defocused photograph washed over it and
   the figure on the right, like the other two domains. Three things
   changed: the pale mid-tone read as beige next to the other two, the
   figure now sits on the LEFT so the set is not three identical
   compositions, and it is the second supplied frame of him, framed as a
   plate rather than cut out.

   A framed plate carries its own background, so the constraint that forced
   a mid-tone ground here in the first place -- a flat dark band merged his
   navy suit at about 1.8:1 -- no longer applies. The hero is paper white. */
.hero { background: var(--paper); position: relative; }
.hero .wrap {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 70px); align-items: center;
    padding-block: clamp(30px, 4vw, 58px) clamp(34px, 4.4vw, 64px);
}
/* A mount, not a floating outline. The photograph sits inside a pale warm
   mat with a hairline edge and a soft lift, which is what makes it read as
   a framed print rather than a rectangle dropped on the page. The mat picks
   up the wash tone so it ties to the beige band below. */
.plate {
    margin: 0; position: relative;
    padding: clamp(10px, 1.1vw, 16px);
    background: var(--wash);
    border: 1px solid rgba(90, 70, 50, .20);
    box-shadow: 0 1px 0 rgba(90, 70, 50, .05), 0 16px 34px rgba(58, 46, 34, .10);
}
.plate img { width: 100%; display: block; }
/* a hairline frame, offset, so the plate reads as placed rather than
   dropped in */

.lead { padding-block: 0; }
/* Two weights in one line: the given names light, the surname heavy, so
   the name has a stress rather than sitting at one uniform weight. */
/* Sized to hold his name on one line on desktop; the 15ch cap was what
   forced the break. The two weights now read across a single line. */
.lead h1 {
    font-weight: 800; font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.04; letter-spacing: -.035em; max-width: 24ch;
}
.lead h1 .given { font-weight: 400; }
.head-rule {
    display: block; width: 68px; height: 3px; background: var(--umber);
    margin-top: clamp(16px, 2vw, 24px);
}
.lead .role { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(18px, 1.9vw, 24px); font-weight: 600; line-height: 1.32; color: var(--body); max-width: 28ch; }
.lead .intro { margin-top: clamp(16px, 1.9vw, 24px); font-size: clamp(16.5px, 1.5vw, 18.5px); font-weight: 400; line-height: 1.62; color: var(--body); max-width: 50ch; }
.pill {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: clamp(24px, 2.8vw, 34px);
    padding: 15px 30px; border: 2px solid var(--ink); border-radius: 999px;
    font-size: 16px; font-weight: 700; color: var(--ink);
}
.pill:hover { background: var(--ink); color: var(--clay); }


/* ── Body ─────────────────────────────────────────────────────────── */
.body { padding-block: clamp(38px, 4.8vw, 70px) clamp(18px, 2.4vw, 30px); }
.body h2 { font-weight: 800; font-size: clamp(27px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -.032em; max-width: 24ch; }
.body h3 { font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.26; letter-spacing: -.022em; margin-bottom: 10px; }
.body p { font-size: 17px; line-height: 1.7; color: var(--body); }
.opening p { font-size: clamp(20px, 2.3vw, 28px); font-weight: 500; line-height: 1.42; letter-spacing: -.022em; color: var(--ink); max-width: min(100%, 620px); }

.top-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }

/* ── The live programme: two entries, each with its own dateline ──── */
.prog { margin-top: clamp(44px, 5.4vw, 80px); }

/* ── His words, on the one dark band. No photograph underneath. ───── */
.said { background: var(--dark); color: #fff; }
.said .wrap { padding-block: clamp(40px, 5.2vw, 74px); }
.said blockquote { max-width: min(100%, 940px); }
.said blockquote p { font-weight: 700; font-size: clamp(25px, 3.6vw, 48px); line-height: 1.16; letter-spacing: -.032em; }
.said cite { display: block; margin-top: clamp(18px, 2vw, 26px); font-style: normal; font-size: 16px; font-weight: 600; color: #cfc7bd; }

/* ── One system: the long passage, given room ─────────────────────── */
.system .wrap { padding-block: clamp(46px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.system h2 { font-weight: 800; font-size: clamp(27px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -.032em; }
.system p { font-size: 17px; line-height: 1.72; color: var(--body); max-width: 62ch; }
.system p + p { margin-top: 1em; }

/* ── Professional standing: a register, not a grid of cards ───────── */
.standing { background: var(--wash); border-top: 1px solid var(--line); }
.standing .wrap { padding-block: clamp(32px, 4vw, 58px); }
.standing h2 { font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; margin-bottom: clamp(20px, 2.4vw, 32px); }
.creds { display: grid; }
.cred-row {
    /* The third column is a fixed width rather than auto. Each row is its
       own grid, so an auto column is sized by that row's own text and the
       columns then start at a different x on every row -- the register
       stops reading as a register and looks centred. A fixed width is the
       same on all four rows. */
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 175px;
    gap: 4px clamp(18px, 2.4vw, 40px); align-items: baseline;
    padding-block: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--line);
}
.cred-row:last-child { border-bottom: 1px solid var(--line); }
.cred-row .what { font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 700; letter-spacing: -.02em; }
.cred-row .who { font-size: 16px; color: var(--quiet); }
.cred-row .state { font-size: 14px; font-weight: 700; color: var(--quiet); text-align: right; }
/* the one piece of styling the publishing rules turn on: what is held and
   what is only in progress must never read the same */
.cred-row .state.live { color: var(--umber); }

footer { border-top: 1px solid var(--line); padding-block: 26px 44px; color: var(--quiet); font-size: 15px; }
footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; }
footer ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 22px; }
footer ul a { display: inline-block; padding-block: 12px; font-weight: 600; }
footer ul a:hover { color: var(--umber); }

.to-top {
    position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(16px, 2.4vw, 30px);
    width: 48px; height: 48px; border-radius: 50%; border: 0;
    background: var(--umber); color: #fff; cursor: pointer;
    display: grid; place-items: center; z-index: 80;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--dark); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ── Motion. Gated behind .js-anim, so with JS off nothing is hidden. ── */
.js-anim .anim-reveal { opacity: 0; transform: translateY(14px); }
.js-anim .anim-reveal.in-view { opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.js-anim .anim-stagger > * { opacity: 0; transform: translateY(12px); }
.js-anim .anim-stagger.in-view > * { opacity: 1; transform: none;
    transition: opacity .45s ease calc(var(--anim-i, 0) * 60ms),
                transform .45s cubic-bezier(.2,.7,.3,1) calc(var(--anim-i, 0) * 60ms); }
.js-anim [data-anim-words] .word { display: inline-block; opacity: 0; transform: translateY(.28em); }
.js-anim [data-anim-words].in-view .word { opacity: 1; transform: none;
    transition: opacity .44s ease calc(var(--word-i, 0) * 55ms),
                transform .5s cubic-bezier(.2,.7,.3,1) calc(var(--word-i, 0) * 55ms); }
@media (prefers-reduced-motion: reduce) {
    .js-anim .anim-reveal, .js-anim .anim-stagger > *,
    .js-anim [data-anim-words] .word { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1080px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
}
@media (max-width: 880px) {
    /* the cut-out moves under the copy and still meets the band's bottom edge */
    .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .lead { padding-bottom: clamp(20px, 4vw, 30px); }
    .top-row { grid-template-columns: minmax(0, 1fr); }
    .system .wrap { grid-template-columns: minmax(0, 1fr); }
    .cred-row { grid-template-columns: minmax(0, 1fr); }
    .cred-row .state { text-align: left; }
}
@media (max-width: 620px) {
    footer .inner { justify-content: center; text-align: center; }
    footer ul { justify-content: center; }
}



/* ── 404. One page exists here, so the message says so. ───────────── */
.not-found { padding-block: clamp(30px, 6vw, 70px) clamp(40px, 7vw, 90px); max-width: 56ch; }
.not-found h1 { font-weight: 800; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.034em; }
.not-found p { margin-top: clamp(14px, 1.8vw, 22px); font-size: 17px; line-height: 1.7; color: var(--body); }
.not-found .pill { margin-top: clamp(10px, 1.4vw, 16px); }


/* ════════════════════════════════════════════════════════════════════
   Rebuilt architecture. The page had one photograph in 3,085px and two
   sections that left holes in the grid.
   ════════════════════════════════════════════════════════════════════ */

/* ── Current programme: full-width rows ──────────────────────────────
   As two columns the right one ran to about half the height of the left
   and left an obvious hole. Rows fill the width and read as a register,
   which also keeps this page structurally distinct from the .org build. */
.prog-rows { margin-top: clamp(22px, 2.8vw, 36px); }
.prog-row {
    display: grid; grid-template-columns: 170px minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 6px clamp(20px, 3vw, 48px); align-items: start;
    padding-block: clamp(20px, 2.6vw, 34px); border-top: 1px solid var(--line);
}
.prog-row:first-child { border-top: 2px solid var(--umber); }
.prog-row:last-child { border-bottom: 1px solid var(--line); }
.prog-row .when { font-size: 14px; font-weight: 700; color: var(--quiet); margin: 0; }
.prog-row h3 { margin-bottom: 0; }
.prog-row p { font-size: 16.5px; line-height: 1.68; }

/* ── A structural interval, full bleed. No text over the photograph. ── */
.interval {
    margin: 0; position: relative; height: clamp(170px, 20vw, 300px);
    overflow: hidden;
}
/* out of flow: in normal flow height:100% has no definite parent height to
   resolve against and the image reverts to its own aspect ratio */
.interval img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; display: block; }

/* ── One system: copy and a plate, so the quadrant is not empty ────── */
.system .wrap {
    padding-block: clamp(38px, 4.8vw, 70px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: clamp(26px, 4vw, 64px); align-items: stretch;
}
.system-copy h2 { max-width: 22ch; margin-bottom: clamp(16px, 2vw, 24px); }
.system-copy p { font-size: 17px; line-height: 1.72; color: var(--body); max-width: 58ch; }
.system-copy p + p { margin-top: 1em; }
.system-plate { margin: 0; position: relative; overflow: hidden;
                min-height: clamp(220px, 26vw, 360px); }
.system-plate img { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; display: block; }

@media (max-width: 880px) {
    .prog-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .system .wrap { grid-template-columns: minmax(0, 1fr); }
    .system-plate { min-height: clamp(200px, 48vw, 300px); }
}

/* ── LinkedIn mark in the footer ──────────────────────────────────────
   Inline SVG, so nothing is fetched and it inherits the footer's own
   link colour through currentColor. The link carries an aria-label
   because it now has no text, and keeps a 44px target: the glyph is
   19px, so the rest comes from padding. */
.social { display: inline-flex; align-items: center; justify-content: center;
          width: 44px; height: 44px; padding-block: 0;
          color: var(--ink); }
.social:hover { color: var(--umber); }
/* ── The footer icon row ───────────────────────────────────
   One li holds every social mark, so the footer list's own column-gap
   separates the row from the text links while the marks themselves sit
   closer together, as an icon cluster should. The -11px pulls the first
   glyph out to the text edge: each mark is centred in a 44px tap
   target, so its ink starts about 11px in. */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -11px; }

.social svg { display: block; }

/* ── Print. Tokens redefined, not just body: every descendant takes its
   colour from them. ────────────────────────────────────────────────── */


/* ── Areas of practice, as a band rather than a card ─────────────────
   It was a small white box with every label wrapping. A full-bleed band
   gives the three areas the weight they deserve and gives the page a
   second colour event between the white hero and the white body.
   Measured: white on umber 8.91:1. */
/* The same pale beige as the Professional standing band at the foot of the
   page, so the two read as one family. It went umber, then clay, then this.
   Note that wash sits only 1.11:1 against the white around it, so unlike
   clay it cannot define itself by tone: it needs the hairline edges, the
   same way .standing does. Ink holds 16.89:1 on it and --body 10.90:1. */
.areas-band {
    background: var(--wash); color: var(--ink);
    border-block: 1px solid var(--line);
}
.areas-band .wrap { padding-block: clamp(26px, 3.4vw, 46px); }
.areas-band h2 {
    font-size: clamp(14px, 1.3vw, 16px); font-weight: 700;
    color: var(--body); margin-bottom: clamp(16px, 2vw, 26px);
}
.areas-band ol {
    list-style: none; display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 44px);
}
.areas-band li {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(10px, 1.4vw, 18px); align-items: baseline;
    border-top: 1px solid rgba(20, 18, 16, .18); padding-top: clamp(12px, 1.4vw, 16px);
}
.areas-band .n { font-size: 13px; font-weight: 700; color: var(--body); }
.areas-band .t {
    font-size: clamp(17px, 1.75vw, 22px); font-weight: 700;
    line-height: 1.2; letter-spacing: -.026em;
}

.top-row.single { grid-template-columns: minmax(0, 1fr); }
.top-row.single .opening p { max-width: min(100%, 720px); }

@media (max-width: 880px) {
}

/* Print comes last on purpose: these overrides are the same
   specificity as the rules they replace, so source order is the
   only thing that makes them win. */
@media print {
    .to-top { display: none; }
    .hero, .said, .standing { background: #fff; color: #000; }
    .said blockquote p, .said cite { color: #000; }
    a { text-decoration: underline; }
}

@media print {
    :root {
        --clay: #ffffff; --dark: #ffffff; --wash: #ffffff;
        --ink: #111111; --body: #222222; --quiet: #444444;
        --umber: #000000; --line: #bbbbbb;
    }
    body { background: #fff; color: #111; }
    .skip-link, .to-top, .interval, .system-plate { display: none; }
    .hero, .said, .standing, footer { background: #fff; color: #111; }
    /* the areas band is new since this block was written, and printed
       white on white: backgrounds are dropped, text colour is not */
    .areas-band { background: #fff; color: #111; border-block: 1px solid #bbb; }
    .areas-band h2, .areas-band .n, .areas-band .t { color: #111; }
    .areas-band li { border-top-color: #bbb; }
    .said blockquote p, .said cite { color: #111; }
    .plate img { max-height: 90mm; width: auto; }
    .pill { border-color: #111; color: #111; }
    a { text-decoration: underline; }
    .social svg { display: none; }
    .social { width: auto; height: auto; margin-left: 0; }
    .socials { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: 0; }
    .social.social--li::after { content: "linkedin.com/in/anton-alexander-p-61447026a"; }
    .social.social--yt::after { content: "youtube.com/@AntonAlexanderPalmer"; }
    .social.social--cb::after { content: "crunchbase.com/person/anton-palmer-d904"; }
    .social.social--pin::after { content: "pinterest.com/antonalexanderpalmer"; }
    .social.social--fl::after { content: "flickr.com/people/antonalexanderpalmer"; }
    .social.social--md::after { content: "medium.com/@antonalexanderpalmer"; }
    .social.social--ss::after { content: "slideshare.net/info80645"; }
    .social.social--sd::after { content: "scribd.com/AntonAlexanderPalmer"; }
    .social.social--wp::after { content: "antonalexanderpalmer.wordpress.com"; }
    .social.social--bl::after { content: "antonalexanderpalmer.blogspot.com"; }
    .social.social--tb::after { content: "tumblr.com/antonalexanderpalmer"; }
    .social.social--wf::after { content: "anton-alexander-palmer.webflow.io"; }
    .social.social--lt::after { content: "linktr.ee/AntonAlexanderPalmer"; }
    .social.social--x::after { content: "x.com/Anton__Palmer"; }
    .social.social--fb::after { content: "facebook.com/AntonAlexanderPalmer"; }
    .social.social--ig::after { content: "instagram.com/antonalexanderpalmer"; }
}

@media (max-width: 880px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr); }
    .plate { width: 72vw; max-width: 340px; }
    .areas-band ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .areas-band li { padding-block: clamp(11px, 1.6vw, 15px); }
}