/* Page designs lifted from the original site (linked, never inlined). */

/* ---- home ---- */
.wp-block-post-title{display:none!important}
.wp-block-site-title a{font-family:Optima,Candara,"Gill Sans","Segoe UI",system-ui,sans-serif!important;color:#0E6E6E!important;font-weight:500;text-decoration:none}
.wp-block-site-title a::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#9B72C9;margin-left:7px;vertical-align:middle}
#sog{--teal:#0E6E6E;--teal-deep:#0B3B39;--mag:#9B72C9;--mag-deep:#7E54B0;--ink:#2A251F;--ink-soft:#6E6456;--ground:#FBF7F1;--sand:#F1E8DB;--card:#FFFFFF;--line:#E7DDCC;--fd:Optima,Candara,"Gill Sans","Segoe UI",system-ui,sans-serif;--fb:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;max-width:100%;overflow-x:hidden;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.7}
#sog *{box-sizing:border-box}
#sog .wrap{max-width:960px;margin:0 auto;padding:0 24px}
#sog h1,#sog h2,#sog h3,#sog .eyebrow,#sog .kicker,#sog .btn,#sog .cred,#sog .card h3{font-family:var(--fd);font-weight:500}
#sog .hero{background:var(--teal);color:#fff;padding:70px 0}
#sog .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
#sog .eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#EFE8FA;margin:0 0 16px}
#sog .hero h1{font-size:40px;line-height:1.08;margin:0 0 18px;color:#fff}
#sog .mark{border-bottom:3px solid var(--mag);padding-bottom:2px}
#sog .lede{color:#dff0ee;font-size:19px;margin:0 0 26px}
#sog .btns{display:flex;gap:12px;flex-wrap:wrap}
#sog .btn{font-size:14px;letter-spacing:.02em;padding:13px 24px;border-radius:999px;border:1px solid transparent;text-decoration:none;display:inline-block}
#sog .btn-solid{background:var(--mag);color:#fff}
#sog .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
#sog .ph{border-radius:16px;background:#0c5f5f;border:1px dashed #4d8f8f;display:flex;align-items:center;justify-content:center;text-align:center;color:#bfe3e0;font-family:var(--fd);font-size:13px;letter-spacing:.05em;padding:16px;line-height:1.5}
#sog .hero .ph{aspect-ratio:4/5}
#sog .cred{background:var(--teal-deep);color:#cfe6e3;text-align:center;padding:16px 24px;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
#sog .cred b{color:#fff;font-weight:500}
#sog .who{background:var(--ground);padding:64px 0}
#sog .who .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
#sog .who .ph{aspect-ratio:1/1}
#sog .kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mag-deep);margin:0 0 10px}
#sog h2{font-size:28px;line-height:1.18;margin:0 0 18px;color:var(--ink)}
#sog .who p{margin:0 0 16px}
#sog .who .close{color:var(--mag-deep);font-style:italic}
#sog .voice{background:var(--teal-deep);color:#eaf3f1;padding:70px 0}
#sog .voice .kicker{color:#EFE8FA}
#sog .voice .sense{display:block;font-style:italic;font-family:var(--fb);color:#a9c6c2;font-size:15px;margin-bottom:6px;text-transform:none;letter-spacing:.01em}
#sog .voice blockquote{margin:0;font-size:26px;line-height:1.5;color:#fff}
#sog .voice cite{display:block;margin-top:18px;font-family:var(--fd);font-style:normal;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#a9c6c2}
#sog .pillars{background:var(--ground);padding:64px 0}
#sog .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
#sog .card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
#sog .card .ph{aspect-ratio:3/2;border-radius:0;border:none;border-bottom:1px dashed var(--line);background:#EAF3F1;color:#7aa39d}
#sog .card .body{padding:16px 18px}
#sog .card h3{font-size:18px;margin:0 0 4px;color:var(--teal)}
#sog .card p{margin:0;font-size:14.5px;color:var(--ink-soft)}
#sog .moments{background:var(--sand);padding:56px 0}
#sog .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
#sog .strip .ph{aspect-ratio:1/1;border-radius:12px;background:#F1E8DB;border:1px dashed #E7DDCC;color:#a08f76}
#sog .come{background:var(--teal);color:#fff;text-align:center;padding:60px 24px}
#sog .come h2{color:#fff;font-size:28px;margin:0 0 10px}
#sog .come p{color:#dff0ee;max-width:520px;margin:0 auto 22px}
#sog .come form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
#sog .come input{flex:1;min-width:210px;font-family:var(--fb);font-size:16px;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff}
#sog .come input::placeholder{color:#cfe6e3}
#sog .come .fine{font-size:13px;color:#bfe0dc;margin-top:14px}
@media(max-width:720px){#sog .hero .wrap,#sog .who .wrap{grid-template-columns:1fr}#sog .grid{grid-template-columns:1fr 1fr}#sog .strip{grid-template-columns:1fr 1fr}}

/* ---- about ---- */
.wp-block-post-title{display:none!important}
#pg{--teal:#0E6E6E;--teal-deep:#0B3B39;--mag:#9B72C9;--mag-deep:#7E54B0;--ink:#2A251F;--ink-soft:#6E6456;--ground:#FBF7F1;--sand:#F1E8DB;--line:#E7DDCC;--fd:Optima,Candara,'Gill Sans','Segoe UI',system-ui,sans-serif;--fb:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;max-width:100%;overflow-x:hidden;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.7}
#pg *{box-sizing:border-box}
#pg .wrap{max-width:820px;margin:0 auto;padding:0 24px}
#pg .phead{background:var(--teal);color:#fff;padding:64px 0}
#pg .phead .eyebrow{font-family:var(--fd);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#EFE8FA;margin:0 0 14px}
#pg .phead h1{font-family:var(--fd);font-weight:500;font-size:36px;line-height:1.12;margin:0;color:#fff}
#pg .body{padding:52px 0}
#pg .body h2{font-family:var(--fd);font-weight:500;font-size:25px;margin:32px 0 14px;color:var(--ink)}
#pg .body p{margin:0 0 18px}
#pg .mark{border-bottom:3px solid var(--mag);padding-bottom:2px}
#pg ul{margin:0 0 18px;padding-left:0;list-style:none}
#pg li{margin:0 0 11px;padding-left:20px;position:relative}
#pg li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--mag)}
#pg .form{display:flex;gap:10px;max-width:420px;margin:22px 0 0;flex-wrap:wrap}
#pg .form input{flex:1;min-width:200px;font-family:var(--fb);font-size:16px;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff}
#pg .form button{background:var(--mag);color:#fff;border:none;font-family:var(--fd);font-size:14px;padding:12px 22px;border-radius:999px;cursor:pointer}
#pg .plist{display:grid;gap:16px;margin-top:22px}
#pg .pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink)}
#pg .pcard:hover{border-color:var(--mag)}
#pg .ptag{font-family:var(--fd);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-deep)}
#pg .pcard h3{font-family:var(--fd);font-weight:500;font-size:20px;margin:6px 0 8px;color:var(--ink)}
#pg .pcard .ex{font-size:15px;color:var(--ink-soft);margin:0}

/* ---- teaching ---- */
.wp-block-post-title{display:none!important}
#pg{--teal:#0E6E6E;--teal-deep:#0B3B39;--mag:#9B72C9;--mag-deep:#7E54B0;--ink:#2A251F;--ink-soft:#6E6456;--ground:#FBF7F1;--sand:#F1E8DB;--line:#E7DDCC;--fd:Optima,Candara,'Gill Sans','Segoe UI',system-ui,sans-serif;--fb:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;max-width:100%;overflow-x:hidden;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.7}
#pg *{box-sizing:border-box}
#pg .wrap{max-width:820px;margin:0 auto;padding:0 24px}
#pg .phead{background:var(--teal);color:#fff;padding:64px 0}
#pg .phead .eyebrow{font-family:var(--fd);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#EFE8FA;margin:0 0 14px}
#pg .phead h1{font-family:var(--fd);font-weight:500;font-size:36px;line-height:1.12;margin:0;color:#fff}
#pg .body{padding:52px 0}
#pg .body h2{font-family:var(--fd);font-weight:500;font-size:25px;margin:32px 0 14px;color:var(--ink)}
#pg .body p{margin:0 0 18px}
#pg .mark{border-bottom:3px solid var(--mag);padding-bottom:2px}
#pg ul{margin:0 0 18px;padding-left:0;list-style:none}
#pg li{margin:0 0 11px;padding-left:20px;position:relative}
#pg li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--mag)}
#pg .form{display:flex;gap:10px;max-width:420px;margin:22px 0 0;flex-wrap:wrap}
#pg .form input{flex:1;min-width:200px;font-family:var(--fb);font-size:16px;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff}
#pg .form button{background:var(--mag);color:#fff;border:none;font-family:var(--fd);font-size:14px;padding:12px 22px;border-radius:999px;cursor:pointer}
#pg .plist{display:grid;gap:16px;margin-top:22px}
#pg .pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink)}
#pg .pcard:hover{border-color:var(--mag)}
#pg .ptag{font-family:var(--fd);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-deep)}
#pg .pcard h3{font-family:var(--fd);font-weight:500;font-size:20px;margin:6px 0 8px;color:var(--ink)}
#pg .pcard .ex{font-size:15px;color:var(--ink-soft);margin:0}

/* ---- come-along ---- */
.wp-block-post-title{display:none!important}
#pg{--teal:#0E6E6E;--teal-deep:#0B3B39;--mag:#9B72C9;--mag-deep:#7E54B0;--ink:#2A251F;--ink-soft:#6E6456;--ground:#FBF7F1;--sand:#F1E8DB;--line:#E7DDCC;--fd:Optima,Candara,'Gill Sans','Segoe UI',system-ui,sans-serif;--fb:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;max-width:100%;overflow-x:hidden;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.7}
#pg *{box-sizing:border-box}
#pg .wrap{max-width:820px;margin:0 auto;padding:0 24px}
#pg .phead{background:var(--teal);color:#fff;padding:64px 0}
#pg .phead .eyebrow{font-family:var(--fd);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#EFE8FA;margin:0 0 14px}
#pg .phead h1{font-family:var(--fd);font-weight:500;font-size:36px;line-height:1.12;margin:0;color:#fff}
#pg .body{padding:52px 0}
#pg .body h2{font-family:var(--fd);font-weight:500;font-size:25px;margin:32px 0 14px;color:var(--ink)}
#pg .body p{margin:0 0 18px}
#pg .mark{border-bottom:3px solid var(--mag);padding-bottom:2px}
#pg ul{margin:0 0 18px;padding-left:0;list-style:none}
#pg li{margin:0 0 11px;padding-left:20px;position:relative}
#pg li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--mag)}
#pg .form{display:flex;gap:10px;max-width:420px;margin:22px 0 0;flex-wrap:wrap}
#pg .form input{flex:1;min-width:200px;font-family:var(--fb);font-size:16px;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff}
#pg .form button{background:var(--mag);color:#fff;border:none;font-family:var(--fd);font-size:14px;padding:12px 22px;border-radius:999px;cursor:pointer}
#pg .plist{display:grid;gap:16px;margin-top:22px}
#pg .pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink)}
#pg .pcard:hover{border-color:var(--mag)}
#pg .ptag{font-family:var(--fd);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-deep)}
#pg .pcard h3{font-family:var(--fd);font-weight:500;font-size:20px;margin:6px 0 8px;color:var(--ink)}
#pg .pcard .ex{font-size:15px;color:var(--ink-soft);margin:0}
/* =========================================================================
   SIGNATURE: the annotated page.
   Section labels move into the left margin, the way a teacher annotates a
   text. Same device as the Writing year-rail and the article date-rail, so
   the whole site speaks with one voice. Desktop only — on narrow screens the
   label sits above its section, where it belongs.
   ========================================================================= */
@media (min-width: 64rem){
  #sog .pillars > .wrap,
  #sog .moments > .wrap,
  #sog .elsewhere > .wrap{
    display:grid;
    grid-template-columns:10rem minmax(0,1fr);
    column-gap:3rem;
    align-items:start;
  }
  #sog .pillars > .wrap > .kicker,
  #sog .moments > .wrap > .kicker,
  #sog .elsewhere > .wrap > .kicker{
    grid-column:1; grid-row:1;
    margin:0; text-align:right; line-height:1.5;
    position:sticky; top:5.4rem;
  }
  #sog .pillars > .wrap > *:not(.kicker),
  #sog .moments > .wrap > *:not(.kicker),
  #sog .elsewhere > .wrap > *:not(.kicker){
    grid-column:2;
  }
}

/* card links are whole-card anchors — never underline their contents */
#sog .card,#sog .card *,#pg .card,#pg .card *{text-decoration:none}
#sog .card:hover .more,#sog .card:focus-visible .more{text-decoration:underline}
/* marginal label: give it room so it doesn't orphan a word */
@media (min-width:64rem){
  #sog .pillars > .wrap,#sog .moments > .wrap,#sog .elsewhere > .wrap{
    grid-template-columns:11.5rem minmax(0,1fr)}
  #sog .pillars > .wrap > .kicker,#sog .moments > .wrap > .kicker,
  #sog .elsewhere > .wrap > .kicker{letter-spacing:.14em;text-wrap:balance}
}


/* ============ HOME: thesis / rooms / receipts / off the clock ============ */


/* EYEBROW — was too thin and small; now it holds its own */
.kick{font-family:var(--fd);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.95rem;margin:0 0 .8rem;line-height:1.4;display:flex;align-items:center;gap:.6rem}
.kick::before{content:"";width:1.8rem;height:2px;background:currentColor;flex:none;opacity:.8}

/* ---------------- THE THESIS ---------------- */
.thesis{background:var(--teal);color:#F1E8DB;padding:clamp(2rem,6vw,4rem) 0 0}
.thesis .wrap{width:min(100% - 2rem,72rem);margin-inline:auto}
.thesis .kick{color:#a7d0cb}
.thesis h1{font-family:var(--fd);font-weight:500;color:#fff;
  font-size:clamp(2rem,1.3rem + 3.4vw,3.8rem);line-height:1.06;margin:0 0 .6rem;
  max-width:19ch;text-wrap:balance}
.thesis h1 em{font-style:normal;border-bottom:4px solid var(--mag);padding-bottom:3px}
.thesis .lede{color:#CFE6E3;font-size:clamp(1.08rem,1rem + .45vw,1.3rem);
  max-width:46ch;margin:0 0 1.8rem;line-height:1.6}

/* the diptych — phone-first: shorter crops so it never eats the screen */
.dip{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0}
@media(min-width:48rem){.dip{gap:1.2rem}}
.dip figure{margin:0;position:relative}
.dip img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;
  display:block;border-radius:12px;box-shadow:0 -8px 40px rgba(0,0,0,.3)}

/* PHONE: caption sits BELOW the photo, at a readable size — never tiny text
   crammed over a 185px-wide image. */
.dip figcaption{padding:.7rem .1rem 0;text-align:center}
.dip .role{font-family:var(--fd);color:#fff;font-weight:500;
  font-size:clamp(1rem,.92rem + .5vw,1.4rem);display:block;line-height:1.25}
.dip .sub{font-family:var(--fd);color:#d7bff0;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:.4rem;line-height:1.5}
.dip .sub br{display:none}          /* let it wrap naturally on a phone */

/* LARGER SCREENS: overlay the caption on the photo, taller crop */
@media(min-width:48rem){
  .dip img{aspect-ratio:4/5;border-radius:12px 12px 0 0}
  .dip figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem .8rem .9rem;
    background:linear-gradient(rgba(14,110,110,0),rgba(14,110,110,.94))}
  .dip .sub{font-size:.74rem;letter-spacing:.1em}
  .dip .sub br{display:inline}
}
@media(min-width:64rem){.dip img{aspect-ratio:3/4}}
.samep{background:var(--teal);color:#fff;text-align:center;font-family:var(--fd);
  font-size:clamp(1.25rem,1rem + 1.4vw,2.1rem);padding:1.3rem 1rem clamp(2rem,5vw,3rem);margin:0}
.samep b{font-weight:500;box-shadow:inset 0 -.5em 0 rgba(155,114,201,.4)}

/* ---------------- WHAT SHE DOES ---------------- */
.rooms{background:var(--ground);padding:clamp(2.4rem,6vw,4rem) 0}
.rooms .wrap{width:min(100% - 2rem,64rem);margin-inline:auto}
.rooms .kick{color:var(--mag-text)}
.rooms h2{font-family:var(--fd);font-weight:500;color:var(--ink);
  font-size:clamp(1.6rem,1.25rem + 1.7vw,2.4rem);margin:0 0 2rem;max-width:24ch;text-wrap:balance}
.span{display:grid;gap:1.8rem;grid-template-columns:1fr}
@media(min-width:56rem){.span{grid-template-columns:repeat(3,1fr);gap:2rem}}
.room{border-top:3px solid var(--teal);padding:1.1rem 0 0}
.room h3{font-family:var(--fd);font-weight:500;color:var(--teal);
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);margin:0 0 .5rem;line-height:1.25}
.room p{margin:0;color:var(--ink);font-size:1.05rem;line-height:1.65}
.room .rlabel{font-family:var(--fd);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mag-text);font-weight:700;margin:0 0 .5rem}

/* ---------------- RECEIPTS ---------------- */
.receipts{background:var(--sand);padding:clamp(2rem,5vw,3rem) 0}
.receipts .wrap{width:min(100% - 2rem,64rem);margin-inline:auto}
.receipts .kick{color:var(--mag-text)}
.receipts p{margin:0 0 .9rem;color:var(--ink);font-size:1.04rem;line-height:1.75;max-width:66ch}
.receipts p:last-child{margin:0}
.receipts b{font-weight:500}

/* ---------------- OFF THE CLOCK ---------------- */
.offclock{background:var(--teal);color:#eaf5f3;padding:clamp(2.2rem,5vw,3.5rem) 0}
.offclock .wrap{width:min(100% - 2rem,64rem);margin-inline:auto}
.offclock .kick{color:#cbe6e2}
.offclock p{margin:0 0 1rem;font-size:clamp(1.08rem,1rem + .4vw,1.25rem);line-height:1.75;
  max-width:58ch}
.offclock b{color:#fff;font-weight:500}
.offclock .closer{font-style:italic;color:#c8e4e0;margin-top:1.2rem}
.mk-btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.mk-btn{display:inline-block;font-family:var(--fd);font-size:1rem;padding:.8em 1.7em;
  border-radius:999px;text-decoration:none;border:1px solid transparent}
.mk-solid{background:var(--mag);color:#fff}.mk-solid:hover{background:var(--mag-deep);color:#fff}
.mk-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.mk-ghost:hover{background:rgba(255,255,255,.15);color:#fff}

/* The home content sits inside #sog, whose ID-level rules outrank the class
   rules above. Re-assert the new home design at matching specificity. */
#sog .kick{margin:0 0 .8rem}
#sog .room .rlabel{margin:0 0 .5rem}
#sog .room h3{margin:0 0 .5rem}
#sog .room p{margin:0}
#sog .thesis h1{margin:0 0 .6rem}
#sog .thesis .lede{margin:0 0 1.8rem}
#sog .rooms h2{margin:0 0 2rem}
#sog .receipts p{margin:0 0 .9rem}
#sog .receipts p:last-child{margin:0}
#sog .offclock p{margin:0 0 1rem}
#sog .dip figcaption p,#sog .samep{margin:0}


/* ============ WORK WITH ME ============ */
#sog .work{background:var(--sand);padding:clamp(2.4rem,6vw,4rem) 0}
#sog .work .wrap{width:min(100% - 2rem,64rem);margin-inline:auto}
#sog .work .kick{color:var(--mag-text)}
#sog .work h2{font-family:var(--fd);font-weight:500;color:var(--ink);
  font-size:clamp(1.6rem,1.25rem + 1.7vw,2.4rem);margin:0 0 1.8rem;max-width:22ch}
#sog .offers{display:grid;gap:1.6rem;grid-template-columns:1fr;margin:0 0 2.4rem}
@media(min-width:56rem){#sog .offers{grid-template-columns:repeat(3,1fr);gap:1.8rem}}
#sog .offer{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);
  border-radius:12px;padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column}
#sog .offer h3{font-family:var(--fd);font-weight:500;color:var(--teal);
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem);margin:0 0 .5rem;line-height:1.25}
#sog .offer p{margin:0 0 1rem;color:var(--ink);font-size:1.02rem;line-height:1.6;flex:1}
#sog .offer-go{font-family:var(--fd);font-weight:600;color:var(--mag-text);
  text-decoration:none;font-size:.95rem}
#sog .offer-go:hover{color:var(--teal)}
/* the form */
#sog .connect,#pg .connect{background:var(--teal-deep);color:#eaf5f3;border-radius:14px;
  padding:clamp(1.4rem,4vw,2.2rem);display:grid;gap:1.2rem 2.5rem;grid-template-columns:1fr}
@media(min-width:56rem){#sog .connect,#pg .connect{grid-template-columns:1fr 1.1fr;align-items:start}}
#sog .connect h3,#pg .connect h3{font-family:var(--fd);font-weight:500;color:#fff;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);margin:0 0 .4rem}
#sog .connect p,#pg .connect p{margin:0;color:#c8e4e0;font-size:1rem}
#sog .cform p,#pg .cform p{margin:0 0 .9rem}
#sog .cform label,#pg .cform label{display:block;font-family:var(--fd);font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:#bfe0dc;margin:0 0 .35rem}
#sog .cform input,#pg .cform input,#sog .cform textarea,#pg .cform textarea{width:100%;box-sizing:border-box;font:inherit;
  font-size:1rem;padding:.7em .8em;border-radius:8px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff}
#sog .cform input:focus,#pg .cform input:focus,#sog .cform textarea:focus,#pg .cform textarea:focus{outline:2px solid var(--mag);
  outline-offset:1px;border-color:transparent}
#sog .cform button,#pg .cform button{font-family:var(--fd);font-size:1rem;background:var(--mag);color:#fff;
  border:0;border-radius:999px;padding:.75em 1.9em;cursor:pointer}
#sog .cform button:hover,#pg .cform button:hover{background:var(--mag-deep)}



/* ---- room panels: tighter, consistent vertical rhythm ---- */
#sog .room .rlabel{padding:0;margin:0 0 .35rem;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mag-text);font-weight:700;line-height:1.4}
#sog .room{padding:.9rem 0 0}
#sog .room h3{margin:0 0 .45rem;line-height:1.22}
#sog .room p{margin:0;line-height:1.6}
#sog .span{gap:1.5rem}
@media(min-width:56rem){#sog .span{gap:2.2rem}}


/* ---- connect: form collapsed behind a button ---- */
#sog .connect,#pg .connect{display:block}
#sog .connect-copy,#pg .connect-copy{margin:0 0 1.1rem}
#sog .connect-toggle,#pg .connect-toggle{border:0}
#sog .connect-toggle > summary,#pg .connect-toggle > summary{list-style:none;cursor:pointer;display:inline-block;
  font-family:var(--fd);font-size:1rem;background:var(--mag);color:#fff;
  border-radius:999px;padding:.78em 1.9em;transition:background .18s ease}
#sog .connect-toggle > summary::-webkit-details-marker,#pg .connect-toggle > summary::-webkit-details-marker{display:none}
#sog .connect-toggle > summary:hover,#pg .connect-toggle > summary:hover{background:var(--mag-deep)}
#sog .connect-toggle > summary:focus-visible,#pg .connect-toggle > summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
#sog .connect-toggle .ct-close,#pg .connect-toggle .ct-close{display:none}
#sog .connect-toggle[open] > summary .ct-open,#pg .connect-toggle[open] > summary .ct-open{display:none}
#sog .connect-toggle[open] > summary .ct-close,#pg .connect-toggle[open] > summary .ct-close{display:inline}
#sog .connect-toggle .cform,#pg .connect-toggle .cform{margin-top:1.2rem;max-width:34rem}
@media(min-width:56rem){#sog .connect-toggle .cform,#pg .connect-toggle .cform{max-width:38rem}}

/* =========================================================================
   SUB-PAGE HARMONISATION — About / Teaching / Come along now share the
   home page's look: same eyebrow treatment (rule + weight), same teal
   headings, and the same marginal-label signature.
   ========================================================================= */

/* 1. eyebrow — match the home .kick exactly */
#pg .phead .eyebrow{
  font-family:var(--fd);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.95rem;line-height:1.4;margin:0 0 .8rem;color:#EFE8FA;
  display:flex;align-items:center;gap:.6rem}
#pg .phead .eyebrow::before{content:"";width:1.8rem;height:2px;background:currentColor;
  flex:none;opacity:.8}

/* 2. page headline — same family/weight as home, sized for a sub-page */
#pg .phead h1{font-family:var(--fd);font-weight:500;color:#fff;line-height:1.08;
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);text-wrap:balance;margin:0}

/* 3. section headings — teal, like the home panels */
#pg .body h2{font-family:var(--fd);font-weight:500;color:var(--teal);
  font-size:clamp(1.35rem,1.15rem + 1vw,1.9rem);line-height:1.2;margin:2.2rem 0 .7rem}
#pg .body h3{font-family:var(--fd);font-weight:500;color:var(--ink);margin:1.6rem 0 .5rem}

/* 4. THE SIGNATURE: on wide screens the section heading sits in the margin,
      matching the Writing year-rail, the article date-rail and the home labels. */



/* ---- About header: identify the person immediately ---- */
#pg .phead-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center}
@media(min-width:52rem){
  #pg .phead-grid{grid-template-columns:1.35fr .65fr;gap:2.5rem}
}
#pg .phead-portrait{width:100%;max-width:15rem;justify-self:start;aspect-ratio:1/1;
  object-fit:cover;object-position:center 18%;border-radius:50%;display:block;
  border:4px solid rgba(255,255,255,.22);box-shadow:0 12px 34px rgba(0,0,0,.28)}
@media(min-width:52rem){#pg .phead-portrait{justify-self:end;max-width:17rem}}
#pg .phead h1{margin:0 0 .3rem}
#pg .phead .role{font-family:var(--fd);color:#EFE8FA;font-weight:500;
  font-size:clamp(.95rem,.88rem + .35vw,1.1rem);letter-spacing:.02em;margin:0 0 .8rem}
#pg .phead .phead-lede{color:#cfe6e3;font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  line-height:1.5;max-width:34ch;margin:0;font-style:italic}




/* ---- page CTA block (sub-pages shouldn't dead-end) ---- */
#pg .page-cta{background:var(--teal);color:#eaf5f3;border-radius:14px;
  padding:clamp(1.4rem,4vw,2.2rem);margin:2.6rem 0 0}
#pg .page-cta h2{font-family:var(--fd);font-weight:500;color:#fff;margin:0 0 .5rem;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem)}
#pg .page-cta p{color:#cfe6e3;margin:0 0 1rem;max-width:46ch}
#pg .page-cta .cta-row{margin:0}
#pg .page-cta .cta-btn{display:inline-block;font-family:var(--fd);font-size:1rem;
  background:var(--mag);color:#fff;text-decoration:none;border-radius:999px;
  padding:.75em 1.7em}
#pg .page-cta .cta-btn:hover{background:var(--mag-deep)}
@media(min-width:68rem){#pg .body > .wrap > .page-cta{grid-column:2}}


/* ---- rail, take 2: absolute positioning keeps normal flow (and floats) intact.
       The heading steps out into the left margin; body text and floated images
       behave exactly as they did before. ---- */
@media (min-width:72rem){
  #pg .body > .wrap{position:relative;max-width:44rem;margin-inline:auto;
    padding-left:0}
  #pg .body > .wrap > h2{position:absolute;left:-15rem;width:13rem;margin:0;
    text-align:right;font-size:1.08rem;line-height:1.35;color:var(--mag-text);
    letter-spacing:.02em}
  /* keep the following block aligned with the heading it belongs to */
  #pg .body > .wrap > h2 + *{margin-top:0}
}

/* =========================================================================
   LABEL COLOUR RULE (site-wide, resolves the two-purple problem):
     • on LIGHT grounds  -> dark purple #7E54B0  (readable, the "darker version")
     • on TEAL bands     -> cream #F1E8DB        (purple can't reach contrast here)
   One purple everywhere it can be used; cream where it can't.
   ========================================================================= */
#pg .phead .eyebrow{color:#F1E8DB}
#pg .phead .role{color:#F1E8DB}
#pg .phead .phead-lede{color:#dff0ee}
#sog .thesis .kick{color:#F1E8DB}
#sog .offclock .kick{color:#F1E8DB}
#sog .connect .kick,#pg .connect .kick{color:#F1E8DB}
/* every purple on a light ground uses the single dark value */
#sog .rooms .kick,#sog .receipts .kick,#sog .work .kick,
#sog .room .rlabel,#sog .offer-go,
#pg .body > .wrap > h2{color:#7E54B0}



/* =========================================================================
   DIPTYCH CAPTION — text directly on the photograph, no backing.
   Legibility comes from layered shadows (a tight one for edge definition,
   a wide soft one to darken the pixels immediately behind the glyphs).
   Costs no page height.
   ========================================================================= */
#sog .dip figure{position:relative}
#sog .dip img{aspect-ratio:4/5;border-radius:14px;object-position:center 20%}
@media(min-width:64rem){#sog .dip img{aspect-ratio:3/4}}

#sog .dip figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;border:0;border-radius:0;
  background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:1.1rem .95rem .95rem;text-align:center}
#sog .dip .role{
  font-family:var(--fd);color:#fff;font-weight:500;line-height:1.2;display:block;
  font-size:clamp(1rem,.9rem + .55vw,1.35rem);letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 1px 8px rgba(0,0,0,.8),
              0 2px 18px rgba(0,0,0,.7), 0 0 34px rgba(0,0,0,.5)}
#sog .dip .sub{
  font-family:var(--fd);color:#D7BFF0;display:block;margin-top:.3rem;opacity:1;
  font-size:clamp(.68rem,.64rem + .18vw,.78rem);letter-spacing:.09em;
  text-transform:uppercase;line-height:1.5;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 1px 6px rgba(0,0,0,.85),
              0 2px 16px rgba(0,0,0,.8), 0 0 30px rgba(0,0,0,.6)}

/* Subtle scrim at the foot of each photo — just enough to seat the caption on
   bright imagery (the Machu Picchu grass). Far lighter than a panel or a full
   gradient fade; on the darker portrait it's barely perceptible. */
#sog .dip figure::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  border-radius:0 0 14px 14px;pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,0) 100%);}
#sog .dip figcaption{position:absolute;z-index:2}

/* ---- Writing header: same component as About, but a soft square so the
       reader can feel they're somewhere else. ---- */
#pg .phead-portrait.soft{border-radius:20px;aspect-ratio:1/1;
  object-position:center center}

/* ---- Teaching read too wide: a full-sentence headline stretching the whole
       68rem band. Constrain it the way About's is constrained. ---- */
#pg .phead h1{max-width:20ch}
#pg .phead .wrap > .eyebrow,
#pg .phead .wrap > h1{max-width:20ch}


/* The connect card sits inside .body on /come-along/, where #pg .body h3/p
   (same specificity, later in the file) were repainting it in dark ink on a
   dark ground. Re-assert the card's own colours. */
#pg .body .connect h3{color:#fff}
#pg .body .connect p{color:#c8e4e0}
#pg .body .connect .fineprint{color:#a9cfca;font-size:.9rem;line-height:1.55;
  margin:1.2rem 0 0;max-width:52ch}
#pg .body .connect .fineprint a{color:#fff;font-weight:600;text-decoration:none}
#pg .body .connect .fineprint a:hover,
#pg .body .connect .fineprint a:focus-visible{color:#fff;text-decoration:underline;
  text-underline-offset:3px}
#pg .body .connect label{color:#bfe0dc}


/* ---- links: no resting underline anywhere; colour + weight carry them,
       and the underline comes back on hover/focus so the affordance is
       still there when someone is actually pointing at it. ---- */
#pg a,#sog a{text-decoration:none}
#pg .body p a,#pg .body li a,#sog p a,#sog li a{color:var(--mag-deep);font-weight:600}
#pg .body p a:hover,#pg .body li a:hover,#sog p a:hover,#sog li a:hover,
#pg .body p a:focus-visible,#pg .body li a:focus-visible,
#sog p a:focus-visible,#sog li a:focus-visible{color:var(--teal);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}