/*
Theme Name: Michael Theisen — Personal
Theme URI: https://www.michaeltheisen.com/
Author: Michael Theisen
Description: Personal site theme for michaeltheisen.com — Option C (Story-led). Paper and ink, Gambarino + Hauora, black-and-white photography, one navy Founder band linking to Brandaify.
Version: 0.2.14
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: mt-personal
*/

/* Gambarino ships with the theme (Fontshare Free Font License: assets/fonts/Gambarino-LICENSE.txt). */
@font-face{
  font-family:Gambarino;
  src:url("assets/fonts/Gambarino-Regular.woff2") format("woff2"),url("assets/fonts/Gambarino-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --paper:#E8E2E2;--raised:#F4F0EF;--sunk:#DCD4D3;
  --ink:#221E1F;--body:#333333;--muted:#5E5757;--hair:#221E1F26;
  --lake:#0B6158;--navy:#0D1B2A;--on-navy:#EDE7E6;--on-navy-muted:#B9C3CE;--bt:#00B894;
  --ph:#2E2A2B;--on-ph:#E8E2E2;
  --serif:Gambarino,"DM Serif Display",Georgia,serif;
  --sans:Hauora,"Hanken Grotesk",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--paper:#1A1718;--raised:#242021;--sunk:#120F10;--ink:#F1ECEB;--body:#DAD3D2;--muted:#A79F9E;--hair:#F1ECEB26;--lake:#6FCBBB;--navy:#183450;--ph:#3A3536}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:18px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
.on-dark{display:none}
@media (prefers-color-scheme: dark){.on-dark{display:block}.on-light{display:none}}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--raised);color:var(--ink);padding:12px 16px;z-index:10}
.skip-link:focus{left:16px;top:16px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px}
.sec{padding-top:96px;padding-bottom:96px}
.serif{font-family:var(--serif);font-weight:400;color:var(--ink)}
.d1{font-size:72px;line-height:1.02;letter-spacing:-1.5px;margin:0}
.hl{font-size:44px;line-height:1.08;letter-spacing:-1px;margin:0}
.lead{font-size:28px;line-height:1.3;letter-spacing:-.5px;margin:0}
.ttl{font-size:26px;line-height:1.2;letter-spacing:-1px;margin:0}
.kick{font-family:var(--sans);font-size:13px;line-height:1.4;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--lake);margin:0}
.kick.muted{color:var(--muted)}
.small{font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.p{margin:0;max-width:62ch}

a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease-out,border-color .2s ease-out}
a:hover{color:var(--lake)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lake);outline-offset:3px}

/* Header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px}
.logo{width:56px;height:56px}
.nav ul{display:flex;gap:32px;align-items:center;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-size:18px;line-height:1.2;padding:12px 0;display:inline-block}
.nav .current-menu-item > a,.nav a[aria-current="page"]{color:var(--lake)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;line-height:1;letter-spacing:-.7px;color:var(--ink);text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:15px 26px 14px;min-height:52px}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.arr{display:inline-block;transition:transform .2s ease-out}
.btn .arr{color:var(--lake)}
a:hover .arr{transform:translateX(4px)}
.more{font-family:var(--serif);font-size:20px;letter-spacing:-.4px;text-decoration:none;padding:10px 0;display:inline-block}

/* Sections */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--raised);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:12px}
.card h3 a{text-decoration:none}
.card .more{margin-top:auto}

/* Photos */
.ph{background:var(--ph);color:var(--on-ph);display:flex;align-items:flex-end;padding:16px;font-size:13px;line-height:1.4;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;overflow:hidden}
.photo{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ph.has-photo{padding:0}

/* Hero */
.heroC{height:clamp(520px,56vw,920px);align-items:flex-start;padding:24px 40px}
.strip{background:var(--paper);position:relative;margin-top:-120px;margin-left:-64px;max-width:1064px;padding:56px 64px 8px 64px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.latest{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 24px;width:100%;margin-top:8px;padding-top:20px;border-top:1px solid var(--hair)}

/* Chapters */
.chap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;padding-top:64px;padding-bottom:64px;border-top:1px solid var(--hair)}
.chap.rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.chaps-text .chap,.chaps-text .chap.rev{grid-template-columns:minmax(0,1fr)}
.chaps-text .ctext{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 64px}
.chap.rev > .ph{order:2}
.chap .ph{aspect-ratio:5 / 4}
.ctext,.chead,.cbody{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.num{font-family:var(--serif);font-size:20px;color:var(--muted);letter-spacing:-.4px;margin:0}

/* Founder band */
.band{background:var(--navy);color:var(--on-navy)}
.bandg{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:center}
.band .hl{color:var(--on-navy)}
.band .p{margin-top:16px;color:var(--on-navy-muted)}
.band a:focus-visible{outline-color:var(--bt)}
.band .btn{color:var(--on-navy);border-color:#EDE7E659}
.band .btn:hover{border-color:var(--on-navy);color:var(--on-navy)}
.bt{color:var(--bt)}
.band a:hover .arr.up{transform:translate(3px,-3px)}

/* Footer */
.foot{padding-top:64px;padding-bottom:40px}
.fgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.fbrand{display:flex;gap:16px;align-items:flex-start}
.fbrand img{width:40px;height:40px}
.flist{display:flex;flex-direction:column;gap:4px;margin:12px 0 0;padding:0;list-style:none}
.flist a{text-decoration:none;padding:6px 0;display:inline-block}
.frule{border:0;border-top:1px solid var(--hair);margin:40px 0 20px}

/* Journal index */
.pagehead{padding-top:56px;padding-bottom:56px;display:flex;flex-direction:column;gap:20px}
.pager{display:flex;justify-content:space-between;gap:24px;margin-top:48px}

/* Single post and pages */
.article{padding-top:56px;padding-bottom:96px}
.article-head{display:flex;flex-direction:column;gap:20px;max-width:900px}
.entry{margin-top:48px;max-width:62ch;font-size:20px;line-height:1.6}
.entry p{margin:0 0 1.1em}
.entry h2,.entry h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.5px;line-height:1.2;margin:1.6em 0 .5em}
.entry h2{font-size:34px}.entry h3{font-size:26px}
.entry blockquote{margin:1.5em 0;padding:0;font-family:var(--serif);font-size:28px;line-height:1.3;color:var(--ink)}
.entry img,.entry figure{margin:2em 0;max-width:100%}
.entry img{filter:grayscale(1)}
.next{border-top:1px solid var(--hair);margin-top:64px;padding-top:32px;display:flex;flex-direction:column;gap:8px}

/* Inner pages */
.phead{padding-top:48px;padding-bottom:56px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.roles{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 48px;list-style:none;margin:0;padding:0}
.roles li{font-size:15px;line-height:1.5;color:var(--muted)}
.biog{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.biog > .ph{aspect-ratio:4 / 5}
.story{display:flex;flex-direction:column;gap:20px}
.quote{background:var(--raised);border-radius:4px;padding:32px;margin-top:16px}
.cred hr{border:0;border-top:1px solid var(--hair);margin:0 0 24px}
.cred .g3{gap:40px}
.filters{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.pill{font-size:13px;line-height:1;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:0 18px;min-height:44px;display:inline-flex;align-items:center;color:var(--ink)}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill[aria-current]{border-color:var(--ink);background:var(--raised)}
.back{font-size:15px;text-decoration:none;color:var(--muted);padding:10px 0;display:inline-block}
.lesson{margin-top:56px;padding-top:32px;padding-bottom:32px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:12px;max-width:62ch}
.nextp{margin-top:56px;background:var(--raised);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:10px;max-width:62ch}
.nextp h2 a{text-decoration:none}
.cgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:80px;align-items:start}
.form{display:flex;flex-direction:column;gap:24px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;line-height:1.4;font-weight:500;color:var(--ink)}
.field input,.field textarea{font:inherit;font-size:18px;color:var(--ink);background:var(--raised);border:1px solid var(--hair);border-radius:4px;padding:13px 16px;min-height:52px;width:100%}
.field input:hover,.field textarea:hover{border-color:var(--muted)}
.field textarea{min-height:200px;resize:vertical}
.hp{position:absolute;left:-9999px}
button.btn{background:transparent;cursor:pointer}
button.btn:hover .arr{transform:translateX(4px)}
.notice{background:var(--raised);border-radius:4px;padding:20px 24px;color:var(--ink)}
.side{display:flex;flex-direction:column;gap:28px;border-top:1px solid var(--hair);padding-top:28px}
.side .item{display:flex;flex-direction:column;gap:6px}
.side a{font-family:var(--serif);font-size:22px;letter-spacing:-.5px;text-decoration:none;padding:6px 0;display:inline-block}

@media (max-width: 760px){
  .biog,.cgrid,.row2{grid-template-columns:minmax(0,1fr)}
  .biog{gap:40px}
  .cgrid{gap:56px}
  .phead{padding-top:24px;padding-bottom:40px}
  .roles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding-top:64px;padding-bottom:64px}
  .d1{font-size:44px;letter-spacing:-1px}
  .hl{font-size:34px}
  .lead{font-size:23px}
  .ttl{font-size:24px}
  .g3,.fgrid,.bandg,.chap,.chap.rev{grid-template-columns:minmax(0,1fr)}
  .chap,.chap.rev{gap:24px;padding-top:48px;padding-bottom:48px}
  .chap.rev > .ph{order:0}
  .chaps-text .ctext{grid-template-columns:minmax(0,1fr)}
  .heroC{height:460px;padding:16px}
  .strip{margin-top:-48px;margin-left:-16px;margin-right:-16px;padding:32px 24px 8px 24px}
  .nav ul{gap:20px}
  .logo{width:44px;height:44px}
  .hdr{padding-top:16px;padding-bottom:16px}
  .btn{font-size:20px}
  .entry{font-size:18px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}