/* Regenerative Outcomes house stylesheet. Canonical copy: /Users/paulsteele/Documents/RegenerativeOutcomes/brand/ro.css. Light only, per the project's recorded exception. */
:root{
  --bg:#F4F1E8; --surface:#EEEADF; --panel:#E7E2D4; --raise:#FAF8F2;
  --ink:#1B1F1A; --ink-soft:#383C34; --muted:#64645A; --line:#D6D1C2; --line-strong:#B9B29F;
  --contour:rgba(70,89,58,.42); --accent:#46593A; --accent-soft:#E3E7DA; --accent-ink:#F4F1E8;
  --mark:#A0502D; --focus:#46593A; --forest:#2C3A2A; --error:#8E2F1C;
  --serif:'Libre Caslon Text',Georgia,serif; --label:'Archivo Narrow','Arial Narrow',sans-serif;
  --gut:clamp(16px,5vw,80px);
  --s1:16px; --s2:22px; --s3:28px; --s4:35px; --s5:44px; --s6:clamp(42px,6.2vw,72px);
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;background:var(--raise);padding:8px 12px;z-index:10}
.lab{font:500 13px/1.35 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nw{white-space:nowrap}
h1,h2,h3{font-weight:400;margin:0}
h1{font-size:var(--s6);line-height:1.05;letter-spacing:-.015em;max-width:16ch}
h2{font-size:var(--s4);line-height:1.15;margin:0 0 26px;max-width:28ch}
h3{font-size:var(--s2);line-height:1.3;margin:0 0 10px}
p{margin:0 0 14px;max-width:64ch}

/* Controls: square, one accent */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;border:0;cursor:pointer;padding:13px 22px;font:600 14px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase}
.btn:hover{background:var(--forest)}
.btn[disabled]{opacity:.55;cursor:wait}
.more{font:600 14px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.more:hover{color:var(--forest)}

/* Header */
header.site{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px var(--gut)}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:21px;color:var(--accent)}
.brand.light{color:#E9E6DB}
header nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
header nav a{font:500 14px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
header nav a:hover{color:var(--accent);border-bottom-color:currentColor}
header nav a[aria-current]{color:var(--mark);border-bottom-color:currentColor}

/* Grid: a 200px margin carries contour labels; content sits in column two */
.row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 40px;padding:0 var(--gut)}
.row>*{grid-column:2}
.row>.more,.row>div:not(.stages):not(.prose):not(.team):not(.two):not(.story):not(.contact){justify-self:start}

/* Page openings */
.intro{padding-top:clamp(48px,8vw,104px);padding-bottom:32px}
.intro .lab{margin:0 0 20px}
.intro .sub,.hero .sub{font-size:var(--s2);line-height:1.45;color:var(--ink-soft);margin:26px 0 0;max-width:40ch}
.intro .acts,.hero .acts{margin-top:32px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.intro .meta{margin-top:18px}
.platefig{margin:8px 0 72px}
.platefig .platewrap{max-width:1040px;width:100%;justify-self:stretch}
.platefig.small .platewrap{max-width:720px}
.platefig figcaption,.hero figcaption{font:italic 400 15px var(--serif);color:var(--muted);margin-top:10px}

.hero{display:grid;grid-template-columns:200px minmax(0,5fr) minmax(0,6fr);gap:0 40px;padding-left:var(--gut);align-items:center;min-height:min(760px,88vh)}
.hero .title{grid-column:2;padding:48px 0 64px}
.hero .title .lab{margin:0 0 22px}
.hero h1{max-width:13ch}
.hero figure{grid-column:3;margin:24px 0 0;align-self:stretch;position:relative;min-height:520px}
.hero .hero-plate{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 55% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 55% 52%,#000 62%,transparent 100%)}
.hero figcaption{position:absolute;left:0;bottom:18px;background:var(--bg);padding:4px 10px 4px 0;margin:0}

/* Contours: arcs of circles centred above the page, flattening as the page goes down */
.contour{position:relative;height:var(--sag)}
.contour svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.contour path{fill:none;stroke:var(--contour);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .5s}
.contour .lab{position:absolute;left:var(--gut);top:-26px;background:var(--bg);padding-right:10px;color:var(--ink-soft);transition:color .5s}
.contour.here path{stroke:var(--mark);stroke-width:1.7}
.contour.here .lab{color:var(--mark)}
.dark + .contour{margin-top:44px}
.band{padding-top:44px;padding-bottom:88px}
.band.dark{background:var(--forest);color:#EFEBDF}
.band.dark .lab{color:#B9C2AE}
.band.dark .big{max-width:34ch}
.lede{font-size:24px;line-height:1.4;max-width:38ch;margin:0 0 24px}
.lede.soft{color:var(--ink-soft);font-size:var(--s2)}
.big{font-size:var(--s3);line-height:1.35;max-width:36ch}

/* The legend (home) */
.here-head{font-size:var(--s5);line-height:1.1;margin:0 0 22px}
.legend{list-style:none;margin:0;padding:0;max-width:980px}
.legend li{border-top:1px solid var(--line)}
.legend li:last-child{border-bottom:1px solid var(--line)}
.legend a{display:grid;grid-template-columns:minmax(0,1fr) 64px 240px;align-items:baseline;gap:4px 24px;padding:18px 0;text-decoration:none}
.legend .p{font-size:24px;line-height:1.3}
.legend .s{font:600 14px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.legend .s::after{content:" →"}
.legend a:hover .p{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.sym{display:inline-block;align-self:center}
.sym svg{display:block;width:56px;height:12px}

/* Ledger: ruled rows with the head hanging left, used for stages, principles, services, workshops */
.ledger{list-style:none;margin:0;padding:0;max-width:980px}
.ledger>li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 40px;padding:22px 0;border-top:1px solid var(--line)}
.ledger>li:last-child{border-bottom:1px solid var(--line)}
.ledger.wide>li{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.ledger .k{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ledger .k .sym{margin-bottom:6px}
.ledger .nm{font-size:var(--s2);line-height:1.3;text-decoration:none}
.ledger a.nm:hover{text-decoration:underline;text-underline-offset:5px;color:var(--accent)}
.ledger .sm{font:italic 400 16px var(--serif);color:var(--muted)}
.ledger .v p:last-child{margin-bottom:0}
.ledger .v .more{display:inline-block;margin-top:12px}
.ledger .role{color:var(--muted);font-style:italic}
.ticks{list-style:none;margin:12px 0 0;padding:0}
.ticks li{padding:4px 0 4px 20px;position:relative;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:.8em;width:10px;border-top:1px solid var(--line-strong)}
.ticks.big li{font-size:var(--s2);padding:10px 0 10px 24px;border-top:1px solid var(--line)}
.fromto{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.fromto p{margin:0;color:var(--ink-soft)}
.fromto p:last-child{color:var(--ink)}
.fromto .lab{display:block;margin-bottom:4px}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:18px 0 0;max-width:980px;border-top:1px solid var(--line)}
.facts>div{padding:14px 20px 14px 0}
.facts>div+div{padding-left:20px;border-left:1px solid var(--line)}
.facts dt{margin:0 0 4px}
.facts dd{margin:0;font-size:17px;line-height:1.4}
.ledger .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.ledger .facts>div:nth-child(3){border-left:0;padding-left:0}
.ledger .facts>div:nth-child(n+3){border-top:1px solid var(--line)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1040px}
.two>div{padding:8px 40px 8px 0}
.two>div+div{padding-left:40px;border-left:1px solid var(--line)}
.two .lab{margin:0 0 10px}
.two .out{border-left:3px solid var(--mark);padding-left:16px;margin-top:18px}

/* Stages drawing */
.stages{max-width:980px}
.stages svg{display:block;width:100%;height:auto}
.stages text{font:500 13px var(--label);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.stages text.n{font:400 20px var(--serif);letter-spacing:0;text-transform:none;fill:var(--ink)}
.stages-list{display:none}

blockquote{margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.25;max-width:26ch}
blockquote p{margin:0}
blockquote.full{font-size:clamp(22px,2.4vw,29px);line-height:1.4;max-width:40ch}
cite{display:block;margin-top:22px;font-style:normal}

/* People */
.team{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px 48px;max-width:1040px;align-items:stretch}
.team>div:last-child{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.team .line{margin-top:-6px}
.team .lead img{height:100%;aspect-ratio:auto;object-position:50% 30%}
.team img,.people img,.story img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:saturate(.8)}
.team .line{font-size:30px;line-height:1.28;margin:0 0 22px;max-width:24ch}
.team .others{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:24px;margin-top:36px;align-items:end}
.team .others .nm{white-space:nowrap}
.nm{margin:10px 0 2px;font-size:18px}
.people{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:40px;max-width:1080px;align-items:start}
.people>div:first-child img{aspect-ratio:4/5}
.people p:not(.nm):not(.lab){font-size:16px;color:var(--ink-soft);margin-top:10px}
.note{margin-top:36px;color:var(--ink-soft);max-width:60ch}
.story{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:48px;max-width:1080px;align-items:start}
.index{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0;max-width:1040px}
.index>div{padding:12px 0;border-top:1px solid var(--line)}
.index dt{font-size:18px}
.index dd{margin:2px 0 0;color:var(--muted);font-size:15px}

/* Notes */
.notes{list-style:none;margin:0;padding:0;max-width:980px}
.notes li{border-top:1px solid var(--line)}
.notes li:last-child{border-bottom:1px solid var(--line)}
.notes a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;padding:16px 0;text-decoration:none}
.notes .t{font-size:22px}
.notes a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* Essays */
.essay-intro h1{max-width:20ch}
.prose{max-width:64ch}
.prose p{font-size:19px;line-height:1.7}
.prose h2{font-size:var(--s3);margin:44px 0 16px}
.pull{border-left:3px solid var(--mark);padding-left:24px;margin:36px 0;font-size:var(--s3);line-height:1.35;max-width:none}
.sig{font-style:italic;color:var(--muted);margin-top:32px}

.pager{display:flex !important;justify-content:space-between;gap:16px;padding-top:0;padding-bottom:56px;font:600 14px var(--label);letter-spacing:.08em;text-transform:uppercase}
.pager a{color:var(--accent);text-decoration:none;grid-column:auto}
.pager a:hover{text-decoration:underline;text-underline-offset:5px}

/* Begin */
.begin .alt{margin-top:22px;font-size:17px;color:var(--muted)}
.begin .alt a{color:var(--accent)}

/* Forms: a single rule under each field, as on a printed form */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;max-width:1040px;align-items:start}
.contact .facts{grid-template-columns:1fr;border-top:0}
.contact .facts>div{border-left:0 !important;padding-left:0 !important;border-top:1px solid var(--line)}
.field{margin:0 0 26px}
.field label{display:block;margin:0 0 4px}
.opt{text-transform:none;letter-spacing:0;font-weight:400}
input,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink-soft);border-radius:0;padding:8px 0;font:400 19px var(--serif);color:var(--ink)}
textarea{border:1px solid var(--line-strong);padding:12px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);border-bottom-width:2px;padding-bottom:7px}
textarea:focus{border-width:2px;padding:11px}
[aria-invalid="true"]{border-color:var(--error)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup{max-width:520px}
.signup .inline{display:flex;gap:16px;align-items:end}
.status{min-height:1.6em;margin:12px 0;font-size:17px}
.status.ok{color:var(--accent)}
.status.err{color:var(--error)}

/* Footer */
footer.site{background:var(--forest);color:#E9E6DB;padding:56px var(--gut) 32px}
footer .fcols{display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(233,230,219,.18)}
footer .lab{color:#B9C2AE;margin:12px 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:3px 0}
footer a{color:#E9E6DB;text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:4px}
footer .fmeta{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:22px;font-size:15px;color:#B9C2AE}
footer .fmeta span{margin-right:auto}

/* Plates */
.plate{display:block;width:100%;height:auto}
.plate .ct{fill:none;stroke:rgba(70,89,58,.38);stroke-width:.9}
.plate .ct.thick{stroke-width:5}
.plate .ix{fill:none;stroke:#2C3A2A;stroke-width:1.6}
.plate .sec{fill:none;stroke:#A0502D;stroke-width:1.4;stroke-dasharray:6 5}
.plate .lead{stroke:rgba(44,58,42,.5);stroke-width:.8;fill:none}
.plate .snd{stroke:#2C3A2A;stroke-width:1.2}
.plate .route{fill:none;stroke:#A0502D;stroke-width:1.6;stroke-dasharray:1 5;stroke-linecap:round}
.plate .hl{stroke:rgba(70,89,58,.35);stroke-width:1}
.plate .fillhatch{fill:url(#hatch);stroke:none}
.plate .grid line{stroke:rgba(70,89,58,.14);stroke-width:.8}
.plate .pt{fill:#A0502D}
.plate .pt2{fill:#2C3A2A}
.plate .pt-off{fill:none;stroke:rgba(44,58,42,.5);stroke-width:1.2}
.plate .cl,.plate .lb{font:600 12.5px var(--label);letter-spacing:.12em;text-transform:uppercase;fill:#2C3A2A;paint-order:stroke;stroke:var(--bg);stroke-width:6px;stroke-linejoin:round}
.plate .lb{fill:#64645A;font-weight:500}
.plate .cl-off{font:500 12.5px var(--label);letter-spacing:.12em;text-transform:uppercase;fill:#8A897E}
.plate .nt,.plate .nt-off{font:400 16px var(--serif);fill:#1B1F1A;paint-order:stroke;stroke:var(--bg);stroke-width:6px}
.plate .nt-off{fill:#8A897E}

@media (max-width:980px){
  .people{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div:nth-child(3){border-left:0;padding-left:0}
  .facts>div:nth-child(n+3){border-top:1px solid var(--line)}
  footer .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  header nav{display:none}
  .row{grid-template-columns:1fr}
  .row>*{grid-column:1}
  .hero{grid-template-columns:1fr;padding-right:var(--gut);min-height:0}
  .hero .title,.hero figure{grid-column:1}
  .hero .title{padding:24px 0 48px}
  .hero figure{order:-1;min-height:300px;margin:0 calc(-1 * var(--gut))}
  .hero figcaption{left:var(--gut)}
  .platefig{margin-bottom:48px}
  .legend a{grid-template-columns:48px minmax(0,1fr)}
  .legend .p{grid-column:1 / -1;font-size:21px}
  .legend .sym{grid-row:2;grid-column:1}
  .legend .s{grid-row:2;grid-column:2}
  .legend .sym svg{width:40px}
  .ledger>li,.ledger.wide>li{grid-template-columns:1fr}
  .two,.story,.contact,.index,.fromto{grid-template-columns:1fr}
  .two>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:24px;margin-top:16px}
  .fromto p+p{margin-top:12px}
  .team{grid-template-columns:1fr}
  .team .lead img{max-width:260px;height:auto;aspect-ratio:3/4}
  .team .line{font-size:24px}
  .story img{max-width:260px}
  .stages svg{display:none}
  .stages-list{display:block;list-style:none;margin:0;padding:0}
  .stages-list li{display:flex;gap:14px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
  .stages-list .lab{width:28px}
  .stages-list span:last-child{font-size:20px}
  .notes a{grid-template-columns:1fr}
  .pager{flex-direction:column}
  .big{font-size:var(--s2)}
}
@media (max-width:520px){
  header .btn{padding:10px 12px;font-size:12px}
  .brand{font-size:18px}
  .people,.facts,footer .fcols{grid-template-columns:1fr}
  .facts>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .signup .inline{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){ .contour path,.contour .lab{transition:none} }
@media print{
  header nav,header .btn,.skip,.begin,.signup,.enquiry{display:none}
  body{background:#fff;font-size:11pt}
  .contour .lab,.hero figcaption{background:#fff}
  .band.dark{background:none;color:#000}
  .band.dark .lab{color:#555}
  footer.site{background:none;color:#000;padding:16px 0}
  footer a,.brand.light{color:#000}
  .hero{min-height:0}
  @page{size:A4;margin:16mm}
}

/* Policy pages: definition lists and sub-heads inside prose */
.policy h2{font-size:var(--s4);margin:0 0 20px}
.policy h3{font-size:var(--s2);margin:30px 0 8px}
.policy dl{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:0 24px;margin:16px 0 20px;border-top:1px solid var(--line)}
.policy dt,.policy dd{padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.policy dt{font:500 13px/1.6 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.policy dd{font-size:17px}
.policy ul{padding-left:20px}
.policy li{margin:0 0 6px}
.policy a{color:var(--accent)}
.quiet{color:var(--muted)}
@media (max-width:860px){ .policy dl{grid-template-columns:1fr} .policy dt{border-bottom:0;padding-bottom:0} }
