/* Fulcrum website stylesheet.
   Extracted from index.html 2026-09-20, when the six layers moved to layers.html and a
   second page existed for the first time. It is one file on purpose: every brand decision
   of the last three days lives in here, and two copies of it is the exact failure this
   project has spent the week cleaning up. Both pages link it. Change it once. */
:root{
    --copper:#AC5C38; --copper-light:#E09E72; --copper-deep:#8E482C;
    --navy:#263240; --navy-light:#607488; --navy-deep:#0E1824;
    /* Pewter is a MARK colour only: the word Business in the wordmark, sampled from the
       registered logo. Never use it for interface text. Slate replaces it everywhere else,
       2026-09-19: a true cool slate, where Pewter was a warm grey with a trace of plum that
       fought the copper. */
    --pewter:#504E54; --pewter-deep:#2E2C32;
    --slate:#4A5568; --slate-deep:#2D3748;

    /* Interface palette, adopted 2026-09-19 from the website colour scheme guide.
       The rule it sets: the logo colours are reserved for the mark and are not used
       on buttons, backgrounds or structural UI, so the brand stays recognisable. */
    --cta:#D97736;          /* Warm Amber, primary action */
    --cta-deep:#B85F26;     /* pressed, and the button's drop edge */
    /* Hover LIGHTENS, 2026-09-20. The label went from white to the ink because white on
       Warm Amber measures 3.16 to one at fifteen pixels, which fails the ordinary contrast
       standard; the ink measures 5.18 and passes. With a dark label, darkening on hover moves
       the wrong way: ink on B85F26 is 3.67 and fails again. So hover brightens instead, to
       6.16. Do not put the hover back to cta-deep without putting the white label back too. */
    --cta-hover:#E08A47;
    --accent2:#3B7A8C;      /* Muted Ocean Teal, secondary action and accents */
    --canvas:#F7F4F0;       /* Warm Linen, page ground, replaces white */
    --ink:#19202B;          /* Deep Charcoal Navy, body text and dark sections */
    --bone:#F4F0E4; --blueprint:#42607A; --stone:#5F6B78; --paper:#FFFFFF;
    --ground:var(--canvas); --body:var(--ink);
    /* Structure at full strength, 2026-09-19. Blueprint solid rather than navy at 22 percent. */
    --line:rgba(59,122,140,.55);
    --line-soft:rgba(59,122,140,.32);
    --c-face:var(--copper); --c-light:var(--copper-light); --c-deep:var(--copper-deep);
    --n-face:var(--navy); --n-light:var(--navy-light); --n-deep:var(--navy-deep);
    /* Wordmark. Fulcrum and Systems take the dark, Business takes the teal, on every
       ground. Changed 2026-09-19 at Greg's direction: Pewter is retired from the
       wordmark. This deliberately puts an interface colour inside the mark, which the
       palette otherwise forbids, and it is the one exception. It also makes the
       wordmark agree with the business card, which already set the descriptor in teal. */
    --w-1:var(--ink); --w-2:var(--accent2);   /* wordmark letters flat since 2026-09-20; the deep offsets are gone */
    --mk-cool:url(#fn); --mk-warm:url(#fc);   /* swapped on .on-dark, see below */
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--ink);background:var(--canvas);font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5}
  a{color:var(--cta-deep)}
  h1,h2,h3{margin:0;font-weight:600}
  h1{font-family:Rokkitt,"Roboto Slab",Georgia,serif;font-weight:900;font-size:clamp(38px,6vw,68px);line-height:1;letter-spacing:.5px;text-transform:uppercase}
  h2{font-family:Rokkitt,"Roboto Slab",Georgia,serif;font-weight:900;font-size:clamp(28px,3.6vw,40px);line-height:1.1;text-transform:uppercase;letter-spacing:.5px}
  h3{font-size:18px;color:var(--ink);line-height:1.25}
  p{margin:0 0 14px}
  .kicker{font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent2);margin-bottom:14px}
  .wrap{max-width:1040px;margin:0 auto;padding:0 24px}
  .lever,.wordmark{display:block;flex:none;overflow:visible}
  .wordmark text{font-family:Rokkitt,"Roboto Slab",Georgia,serif;font-weight:900}
  /* nav */
  /* Inverted 2026-09-19: the page opens on the dark and resolves into the linen,
     rather than a light page with one dark band dropped into the middle. Dark top,
     light body, dark foot. */
  /* Scoped to nav.on-dark 2026-09-20. It was a bare nav selector, which was safe while the
     site nav was the only nav on the page. The subpage breadcrumb is also a nav, correctly,
     and it inherited the sticky dark bar and rendered as a black strip under the real one. */
  nav.on-dark{position:sticky;top:0;z-index:10;background:var(--ink);border-bottom:1px solid rgba(59,122,140,.5)}
  nav.on-dark .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#C2C9D2}
  .links{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:500}
  .links a{color:#E5E7EB;text-decoration:none}
  .links a:hover{color:#FFFFFF}
  .links a.btn,.links a.btn:hover{color:var(--ink)}
  .btn{display:inline-block;background:var(--cta);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:12px 20px;border-radius:6px;box-shadow:0 2px 0 var(--cta-deep)}
  .btn:hover{background:var(--cta-hover)}
  .btn.ghost{background:transparent;color:var(--accent2);box-shadow:none;border:1px solid var(--accent2)}
  .btn.ghost:hover{background:var(--accent2);color:#fff}
  @media (max-width:760px){.links a:not(.btn){display:none}}
  /* hero */
  /* Two values on the dark, and the split is by role rather than by taste.
       HEADERS take the silver, C2C9D2. That is the second stop of the cool letter's
       own gradient, so a heading is made of a colour the mark is made of. It reads as
       metal at display size, which is the point.
       COPY takes Platinum Silver, E5E7EB. At body size the silver goes dull, and
       E5E7EB is the right weight for reading.
     Reversed here 2026-09-19 after an earlier pass put the silver on everything and
     the copy went muddy. Buttons keep white text; silver on the amber cannot be read. */
  .hero{padding:56px 0 52px;background:var(--ink);color:#E5E7EB}   /* copy */
  .hero h1{color:#C2C9D2;font-size:clamp(29px,5.4vw,56px)}          /* header */
  .hero h1 .l{display:block;white-space:nowrap}
  .hero .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center}
  .hero p.lead{font-size:20px;max-width:540px;color:#E5E7EB}
  .hero .kicker{color:var(--cta)}
  .hero .kicker::before{background:var(--cta)}
  .hero .btn.ghost{color:#E5E7EB;border-color:#6B7684}
  .hero .btn.ghost:hover{background:#E5E7EB;color:var(--ink)}
  /* Every pair of buttons is a flex row with a gap, 2026-09-20. Two of the three pairs used an inline
     left margin on the second button, which indents it by eight pixels and leaves no vertical gap once
     the pair wraps on a phone. One rule for all of them; the gap works in both directions. */
  .actions{display:flex;gap:12px;flex-wrap:wrap}
  .hero .actions{margin-top:18px}
  .hero-mark{display:flex;justify-content:center}
  @media (max-width:860px){.hero .wrap{grid-template-columns:1fr} .hero-mark{display:none} .hero{padding:40px 0 32px}}
  /* sections */
  section{padding:56px 0}
  /* The six layers band is dark, 2026-09-19. The page reads dark, light, dark, light,
     dark from top to foot. Values follow the role rule: headers silver, copy Platinum
     Silver. The label and the numerals take amber rather than teal, because teal on
     the charcoal drops to about three and a half to one and goes muddy at small size. */
  section.navy{background:var(--ink);color:#E5E7EB}
  section.navy h2,section.navy h3{color:#C2C9D2}
  section.navy .kicker{color:var(--cta)}
  section.navy .kicker::before{background:var(--cta)}
  section.navy p{color:#E5E7EB}
  .grid{display:grid;gap:16px;margin-top:24px}
  .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
  @media (max-width:860px){.g3,.g2{grid-template-columns:1fr}}
  .card{background:var(--paper);border:1px solid rgba(59,122,140,.45);border-radius:8px;padding:18px 20px;box-shadow:0 2px 0 rgba(66,96,122,.14)}
  .card p{margin:0}
  .card .head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
  .card .num{font-family:Rokkitt,Georgia,serif;font-weight:900;font-size:28px;line-height:1;color:var(--accent2);flex:none}
  .navy .card{background:rgba(255,255,255,.06);border-color:rgba(226,232,240,.22);box-shadow:none}
  .navy .card .num{color:var(--cta)}
  /* Phase sub-line, 2026-09-20. Each phase carries one line saying what it is before the
     paragraph saying what you get. A .phase-note rule lived here for about an hour, holding
     the promise that the design could be bought alone; it existed only because design and
     implementation had been merged into one phase. Greg split them back apart the same day,
     so design is phase two again and the note had nothing left to say. Removed rather than
     left unused. */
  .phase-sub{color:var(--accent2);font-weight:600;margin:0 0 8px}
  .steps{display:grid;gap:0;margin-top:24px;border-top:2px solid var(--accent2)}
  .step{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
  .step .n{font-family:Rokkitt,Georgia,serif;font-weight:900;font-size:28px;line-height:1;color:var(--accent2)}
  .step h3{margin-bottom:4px}
  .step p{margin:0;color:var(--slate)}
  /* Dark-ground swap. The mark and the wordmark are both instantiated through <use>,
     so their paths live in a shadow tree. A descendant selector cannot reach inside
     that boundary: .on-dark .logo-cool-mark simply never matches, which is why an
     earlier attempt at this silently did nothing and the light mark kept rendering
     on the charcoal. Only INHERITED properties cross the boundary, so the swap has
     to go through custom properties. Do not replace these with descendant rules. */
  .on-dark{--mk-cool:url(#fs); --mk-warm:url(#fcb);
           --w-1:#C2C9D2; --w-2:var(--accent2)}
  .quote{border-left:4px solid var(--cta);padding-left:20px;font-size:21px;font-family:Rokkitt,Georgia,serif;font-weight:700;color:var(--ink);max-width:720px;margin:28px 0 20px}
  /* The pull quote moved into the About band on 2026-09-20, which is a dark ground, and the
     rule above sets it in the ink. Dark on dark is invisible. Display type on the dark takes
     the header silver by the role rule, the same value as the headlines around it. */
  section.navy .quote{color:#C2C9D2}
  /* Relaid 2026-09-19. The photograph used to sit in the heading column, which left the
     text column running out early and a hole in the bottom right. It has its own column
     now and the heading travels with the copy it belongs to. Both columns start at the top. */
  .about{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
  .about .aboutbody p:last-child{margin-bottom:0}
  /* The copy stays top aligned; the photograph centres against it, so a short column
     of text does not leave the image stranded at the top of a tall band. */
  /* The photograph starts at the top of its column, 2026-09-20. It was centred, and once the about copy
     gained two folds the photo slid to a new midpoint every time one opened, so the whole band appeared
     to jump. The guide already said both columns start at the top; the stylesheet had not caught up. */
  .portrait{display:block;width:100%;height:auto;border-radius:10px;align-self:start;
            border:1px solid rgba(59,122,140,.4);box-shadow:0 3px 0 rgba(25,32,43,.10)}
  /* On the charcoal the teal hairline disappears and the dark shadow does nothing.
     A light hairline and no shadow, so the photograph sits on the ground cleanly. */
  .navy .portrait{border-color:rgba(226,232,240,.28);box-shadow:none}
  @media (max-width:860px){.portrait{max-width:168px;margin-top:16px}}
  /* Stacked, the copy leads and the photograph follows. A large face before the reader
     knows whose it is reads oddly on a phone. */
  @media (max-width:860px){
    .about{grid-template-columns:1fr;gap:26px}
    .about .portrait{order:2;max-width:190px;align-self:start}
    .about .aboutbody{order:1}
  }
  .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
  @media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}
  .contact{border-left:0}
  .contact .big{font-family:Rokkitt,Georgia,serif;font-weight:900;font-size:clamp(24px,3vw,34px);color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0}
  .contact .big:hover{color:var(--cta-deep)}
  footer{background:var(--ink);color:#E5E7EB;padding:26px 0;font-size:13px}
  footer a{color:#E5E7EB}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
  /* The card's foot rule was carried onto the page as a boundary device and removed
     again 2026-09-19. Once every band alternated light and dark, a full-width rule at a
     boundary straddled two grounds, and it only ever landed on four of the six seams.
     The device stays on the business card, where the card has one ground and one foot.
     What survives here is the short tick above each section label, which is consistent
     because every label has one. */
  /* short teal tick above every section label, the card's vertical accent turned horizontal */
  .kicker{position:relative;padding-top:16px}
  .kicker::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;background:var(--accent2);border-radius:1px}
  section.navy .kicker::before{background:var(--accent2)}

/* The current page in the navigation, 2026-09-20, added with layers.html. */
.links a.here{color:#FFFFFF;border-bottom:2px solid var(--cta);padding-bottom:2px}

/* Subpage hero headline, 2026-09-20. The homepage h1 sets each line in a nowrap span,
   because the tagline is two short fixed lines and must never break mid-line. A longer
   subpage headline inherits that and runs straight off the page: it measured 1190 against
   a 1045 viewport before this. Subpage headlines carry .sub, wrap normally, and are set a
   step smaller so they still read as a headline at three lines rather than one. */
.hero h1.sub{font-size:clamp(27px,4.2vw,44px);line-height:1.04;max-width:16ch}

/* ======================================================================
   SUBPAGE SYSTEM, 2026-09-20.
   Built because the first subpage was a copy of the homepage's architecture:
   same dark hero, same giant mark, same two-button pair, same alternating
   bands, same closing block. A visitor who clicked through landed on what
   read as the page they had just left, scrolled down. Greg called it and he
   was right.

   The rule this sets: the homepage is a front door and opens on the dark.
   A subpage is a chapter and opens on the linen. That one inversion is what
   tells a reader they have moved, before they have read a word. Subpages
   also carry a breadcrumb, drop the hero mark, and drop the action pair down
   to a single quiet link, because a chapter does not need to sell the
   building it is inside.

   Each subpage then owns ONE device the others do not have: the stack on the
   six layers page, the comparison on the why page, the reading column on the
   essay. That is what stops the three subpages collapsing into each other,
   which is the same failure one level down. Do not reuse a device across two
   pages without replacing it on one of them.
   ====================================================================== */

/* --- the page head that replaces the hero on a subpage --- */
.pagehead{background:var(--canvas);padding:30px 0 40px;border-bottom:1px solid var(--line-soft)}
.crumb{font-size:13px;color:var(--stone);margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{color:var(--stone);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.crumb a:hover{color:var(--cta-deep);border-bottom-color:var(--cta-deep)}
.crumb .sep{color:var(--line);font-size:11px}
.crumb strong{font-weight:600;color:var(--ink)}
/* The subpage headline is sentence-height rather than monument-height. The homepage
   h1 is two fixed short lines and is set in nowrap spans; nothing here inherits that. */
.pagehead h1{font-size:clamp(28px,4.2vw,46px);line-height:1.05;color:var(--ink);max-width:19ch}
.pagehead .standfirst{font-size:19px;line-height:1.5;color:var(--slate);max-width:640px;margin:18px 0 0}
.pagehead .meta{margin-top:22px;font-size:14px;color:var(--stone)}
.pagehead .meta a{color:var(--cta-deep);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.pagehead .meta a:hover{border-bottom-color:var(--cta-deep)}
@media (max-width:860px){.pagehead{padding:24px 0 30px}}

/* --- DEVICE ONE, the six layers page: the build order ------------------
   Runs one to six, downward. It was drawn the other way first, layer six at the
   top, because that is how the thing is actually stacked and the diagram was
   literal about it. Greg killed it: on a page you read downward, so a reader
   met the last step first and had to climb back up to understand it. A picture
   that needs an instruction to read it has already failed.
   So the device is now the ORDER OF WORK rather than a cross-section, and the
   two agree, because the order of work runs the same way the eye does. The
   conceptual stack is unchanged and the prose still says automation sits on
   top of five layers; that sentence just no longer sits next to a picture
   contradicting it. The foundation keeps its bracket and label so the eye reads
   one block of five rather than five loose rows, and layer six is held off the
   end of it by the gap rule. Do not put six back at the top. */
.stack{margin-top:28px}
.stack .tier{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
             padding:16px 18px;border:1px solid rgba(226,232,240,.22);
             background:rgba(255,255,255,.05);margin-bottom:6px;border-radius:6px}
.stack .tier .lv{font-family:Rokkitt,Georgia,serif;font-weight:900;font-size:30px;line-height:1;color:var(--cta)}
.stack .tier h3{margin-bottom:5px}
.stack .tier p{margin:0;font-size:15px}
/* Layer six is the one being bought and the one that fails on its own, so it is
   held off the end of the foundation rather than sitting flush against it. */
.stack .sixth{border-color:rgba(217,119,54,.55);background:rgba(217,119,54,.10);margin-bottom:0}
.stack .gap{display:flex;align-items:center;gap:14px;padding:16px 0 14px;font-size:13px;
            letter-spacing:2px;text-transform:uppercase;color:var(--cta)}
.stack .gap::after{content:"";flex:1;height:1px;background:rgba(217,119,54,.4)}
.stack .base{border-left:3px solid var(--accent2);padding-left:16px}
.stack .baselabel{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);
                  margin:0 0 12px;font-weight:600}
.stack .footnote{margin:18px 0 0;font-size:14px;color:#AEB6C0}
@media (max-width:620px){.stack .tier{grid-template-columns:38px 1fr;gap:12px;padding:14px}}

/* --- DEVICE TWO, the why page: the comparison --------------------------
   Four honest columns, not three strawmen and a hero. Each option says what it
   is genuinely right for before it says where it stops, because an owner who
   has already hired a consultant will stop reading at the first unfair line. */
.options{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media (max-width:980px){.options{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.options{grid-template-columns:1fr}}
.opt{border:1px solid var(--line-soft);border-radius:8px;padding:18px;background:var(--paper);
     display:flex;flex-direction:column}
.opt h3{font-family:Rokkitt,Georgia,serif;font-weight:900;font-size:19px;text-transform:uppercase;
        letter-spacing:.4px;margin-bottom:12px}
.opt .right{font-size:14px;color:var(--slate);margin:0 0 12px}
.opt .stops{font-size:14px;color:var(--ink);margin:0;padding-top:12px;border-top:1px solid var(--line-soft)}
.opt .tag{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--stone);
          font-weight:600;display:block;margin-bottom:5px}
/* The last column is the answer the page is arguing for, so it is weighted rather
   than merely present. Amber edge, not amber fill: body copy never sits on the amber. */
.opt.ours{border-color:var(--cta);border-width:2px;box-shadow:0 2px 0 rgba(217,119,54,.25)}
.opt.ours h3{color:var(--cta-deep)}

/* --- the symptom list, why page --------------------------------------- */
.symptoms{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
@media (max-width:760px){.symptoms{grid-template-columns:1fr}}
.symptoms li{position:relative;padding-left:26px;font-size:16px;line-height:1.45}
.symptoms li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;
                     border:2px solid var(--cta);border-radius:2px}

/* --- DEVICE THREE, the essay page: the reading column ------------------
   One column, no grid, no cards. Wider type and a longer line height than the
   rest of the site, because this is the only page on it somebody reads rather
   than scans. 68 characters is the measure; past that the eye loses the line. */
.essay{max-width:680px;margin:0 auto}
.essay p{font-size:18px;line-height:1.65;margin:0 0 20px;color:var(--ink)}
.essay h2{font-size:clamp(23px,2.6vw,30px);margin:42px 0 14px}
.essay h2 .no{color:var(--cta);font-size:.8em;margin-right:12px}
.essay .lead-in{font-size:20px;line-height:1.6;color:var(--slate)}
.essay ul{margin:0 0 20px;padding-left:22px}
.essay li{font-size:18px;line-height:1.6;margin-bottom:10px}
.essay .source{font-size:14px;line-height:1.55;color:var(--stone);border-left:3px solid var(--line-soft);
               padding-left:16px;margin:0 0 20px}
.essay .source a{color:var(--cta-deep)}
/* A full-width dark band holding one sentence, once, at the turn of the argument.
   It is the essay's only change of ground and it earns it by being the thesis. */
.turn{background:var(--ink);color:#E5E7EB;padding:44px 0;margin:44px 0}
.turn p{max-width:680px;margin:0 auto;font-family:Rokkitt,Georgia,serif;font-weight:700;
        font-size:clamp(22px,3vw,30px);line-height:1.28;color:#C2C9D2;text-align:left}

/* --- the quiet closing block a subpage uses instead of the full contact band --- */
/* Closing block on White, not Bone, 2026-09-20. The guide sets Bone as print stock and not a screen
   ground; White is the card ground and is the one palette colour that reads as a distinct quiet band
   against the linen without inventing a value. */
.nextstep{background:var(--paper);border-top:1px solid var(--line-soft);padding:42px 0}
.nextstep .wrap{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
@media (max-width:760px){.nextstep .wrap{grid-template-columns:1fr}}
.nextstep h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.nextstep p{margin:0;color:var(--slate);max-width:560px}

/* --- the disclosure, 2026-09-20 ----------------------------------------
   Built to remove a repeat rather than to add an effect. The six layers page
   listed all six layers, then listed all six again underneath as the cost of
   skipping each one, and then listed the five phases a third time. Three lists
   of near enough the same thing, and a reader who had understood the first one
   had to scroll past two more to reach the end. Greg asked for the cost to sit
   behind a control on each layer instead.

   Native details and summary, deliberately, with no script. It opens without
   JavaScript, it is reachable by keyboard and announced correctly by a screen
   reader, and a browser that fails to style it still shows the content. There
   is no open and close animation: a details element hides its own content when
   closed, so a height transition needs either script or a very new selector,
   and an instant reveal that always works beats a smooth one that sometimes
   does not.

   Teal on the light grounds, amber on the charcoal. That follows the same rule
   as the kickers: teal drops to about three and a half to one on the charcoal
   and goes muddy at small size, so the dark ground takes the amber. */
.reveal{margin-top:12px}
.reveal>summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
                font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
                color:var(--accent2);border:1px solid var(--accent2);border-radius:5px;
                padding:7px 12px;user-select:none}
.reveal>summary::-webkit-details-marker{display:none}
.reveal>summary::after{content:"+";font-size:16px;line-height:1;font-weight:700}
.reveal[open]>summary::after{content:"\2212"}
.reveal>summary:hover{background:rgba(59,122,140,.10)}
.reveal>summary:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.reveal .body{margin:14px 0 2px;padding-left:15px;border-left:2px solid var(--accent2)}
.reveal .body p{margin:0;font-size:15px;line-height:1.55}
/* On the charcoal, amber. */
.navy .reveal>summary{color:var(--cta);border-color:rgba(217,119,54,.55)}
.navy .reveal>summary:hover{background:rgba(217,119,54,.12)}
.navy .reveal .body{border-left-color:rgba(217,119,54,.55)}

/* Two controls on one box, 2026-09-20. A layer says both what its absence costs and
   which phase builds it, so the pair sits on one row while closed and the opened one
   takes a row of its own. Flex basis rather than a column layout, because the opened
   body needs the full width of the box to read at fifteen pixels; half a box is about
   thirty characters and that is not a measure, it is a column of syllables. */
.reveals{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.reveals>.reveal{margin-top:0;flex:0 0 auto}
.reveals>.reveal[open]{flex:1 0 100%}
/* On a phone the two labels do not fit beside each other: measured at 375 they wanted
   266 and 227 pixels against about 249 available inside the box, and the page scrolled
   sideways. Below 620 each control takes its own row at full width, with the plus pushed
   to the right edge, and the label wraps rather than pushing the box open. */
@media (max-width:620px){
  .reveals>.reveal,.reveals>.reveal[open]{flex:1 0 100%}
  .reveals>.reveal>summary{width:100%;justify-content:space-between;text-align:left}
}
.reveal>summary{max-width:100%}

/* The positive control, 2026-09-20. Each layer box carries a negative and a positive:
   what its absence costs, and what building it gives you. Greg asked for the pair to be
   read by colour, amber for the cost and teal for the gain.

   The palette teal cannot be used here. Measured on the charcoal, 3B7A8C against 19202B
   is 3.39 to one, which is the reason the whole dark band took the amber in the first
   place, and a twelve pixel uppercase label is exactly the size that rule protects.
   So the dark ground gets a brightened teal, 4E93A6, at 4.71 to one. It is the same hue
   at 193 degrees, a step lighter, and it is the same move the mark already makes with
   the brightened terracotta on dark grounds. Do not substitute the flat accent2 here. */
:root{--accent2-bright:#4E93A6}
.navy .reveal.gain>summary{color:var(--accent2-bright);border-color:rgba(78,147,166,.6)}
.navy .reveal.gain>summary:hover{background:rgba(78,147,166,.14)}
.navy .reveal.gain .body{border-left-color:rgba(78,147,166,.6)}

/* Folds, 2026-09-20. Greg said the homepage carried far too much copy and that a reader who
   wants more should click for it. So every list item on the homepage, the four things an owner
   is building toward and the five phases, shows its heading and one line, and the paragraph
   opens on a click. The heading row itself is the control, with a plus at the right edge, because
   a list of items needs no label beyond the item. Prose that opens, as in the about band, keeps
   the labelled .reveal control instead, because a paragraph has no heading to click. Same
   native details element as the six layers page, no script, nothing open on load. */
details.fold>summary{list-style:none;cursor:pointer;user-select:none;position:relative;padding-right:34px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:Rokkitt,Georgia,serif;font-weight:900;font-size:24px;line-height:1;color:var(--accent2)}
details.fold[open]>summary::after{content:"\2212"}
details.fold>summary:hover h3{color:var(--accent2)}
details.fold>summary:focus-visible{outline:2px solid var(--cta);outline-offset:4px;border-radius:4px}
.card.fold{padding:16px 20px}
.card.fold>summary{display:flex;align-items:baseline;gap:12px}
.card.fold>summary h3{margin:0}
.card.fold>.body{margin-top:10px}
.step.fold{display:block}
.step.fold>summary{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start}
.step.fold>summary .phase-sub{margin-bottom:0}
.step.fold>.body{padding:10px 0 2px 70px}
@media (max-width:620px){.step.fold>.body{padding-left:0}}
/* The about band's pull quote sits inside a fold now, so it loses its top margin there. */
.reveal .body .quote{margin-top:4px}
.reveal .body blockquote+p{margin-top:12px}

/* In the about band the two labelled controls stack, one under the other, 2026-09-20. Side by side,
   opening the first pushed the second onto a new row, which read as the section rearranging itself.
   Stacked, opening one only moves what is below it down, which is what a reader expects. */
.about .reveals{flex-direction:column;align-items:flex-start;gap:8px}
.about .reveals>.reveal,.about .reveals>.reveal[open]{flex:0 0 auto;width:100%}
.about .reveals>.reveal>summary{width:auto}