/* morgantate.com: black field, Instrument Serif + Newsreader, founder green. Matches the f² newsletter brand. */
:root{
  --black:#000000; --white:#FFFFFF; --stone:#E1DFD9; --sand:#E0DAD2;
  --mute:#A3A19B; --line:rgba(224,218,210,.28); --green:#21823D; --green-hi:#2A9A4A;
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:"Newsreader", "Iowan Old Style", Georgia, serif;
  --measure:36rem; --wide:70rem;
  --gutter:clamp(1.25rem,4vw,2rem);
  --section:clamp(3.75rem,9vw,6.5rem);
  --tap:2.75rem; /* 44px minimum touch target */
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem;background:var(--black)}
body{margin:0;background:var(--black);color:var(--white);
  font:400 clamp(1.125rem,1.05rem + .3vw,1.25rem)/1.6 var(--body);font-optical-sizing:auto;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .15s}
a:hover{color:var(--sand)}
::selection{background:var(--green);color:var(--white)}
:focus-visible{outline:2px solid var(--green-hi);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:20;background:var(--white);color:var(--black);
  padding:.6rem 1rem;border-radius:999px;text-decoration:none;font-weight:500}
.skip:focus{top:.75rem}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-left)) 0 max(var(--gutter),env(safe-area-inset-right))}
em{font-style:italic}

/* header */
.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
.site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;padding-block:.6rem}
.mark{font:400 1.65rem/1 var(--serif);text-decoration:none;letter-spacing:-.005em;justify-self:start;
  min-height:var(--tap);display:inline-flex;align-items:center}
.nav{display:flex;align-items:center;font:400 1.15rem/1 var(--serif)}
.nav a{text-decoration:none;padding:0 .9rem;min-height:var(--tap);display:inline-flex;align-items:center;position:relative}
.nav a + a::before{content:"";position:absolute;left:0;top:50%;height:1em;margin-top:-.5em;border-left:1px solid var(--line)}
.nav a[aria-current="page"]{text-decoration:underline}
.head-cta{justify-self:end}

/* buttons: Instrument Serif pills, like the headings, portrait and day markers */
.btn{font:400 1.25rem/1 var(--serif);letter-spacing:.005em;padding:.7rem 1.45rem .75rem;border:1px solid var(--green);
  background:var(--green);color:var(--white);border-radius:999px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:var(--tap);white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s var(--ease)}
.btn:hover{background:var(--green-hi);border-color:var(--green-hi);color:var(--white)}
.btn:active{transform:scale(.98)}
.btn.sm{padding:.5rem 1.1rem .55rem;font-size:1.1rem}
.btn.ghost{background:transparent;border-color:var(--sand);color:var(--white)}
.btn.ghost:hover{background:var(--white);border-color:var(--white);color:var(--black)}

/* hero */
.hero{padding:clamp(4.5rem,11vw,8rem) 0 clamp(3.75rem,9vw,6rem);text-align:center;border-bottom:1px solid var(--line)}
.hero h1{font:400 clamp(3rem,1.6rem + 6vw,6.25rem)/.98 var(--serif);margin:0 auto 1.5rem;max-width:13em;letter-spacing:-.018em}
.hero .lede{max-width:34rem;margin:0 auto 2.25rem;font-size:clamp(1.125rem,1.05rem + .35vw,1.3rem);line-height:1.55;color:var(--white)}
.hero .lede u{text-decoration-thickness:1px;text-underline-offset:.2em}
.hero .prose{margin-bottom:2.25rem}
.hero .signup{margin-inline:auto}
.hero .fine{font-style:italic;margin-top:1.1rem}
.hero.left{text-align:left}
.hero.left h1,.hero.left .lede,.hero.left .signup{margin-left:0}
.fine{font-size:.9rem;color:var(--mute);margin:1rem 0 0}

/* signup: one white pill with the button inside, as on the newsletter */
.signup{display:flex;align-items:center;gap:.35rem;max-width:29rem;background:var(--white);border-radius:999px;padding:.3rem;
  transition:box-shadow .15s}
.signup input{flex:1 1 auto;min-width:0;font:inherit;font-size:1rem;min-height:var(--tap);padding:.6rem .8rem .6rem 1.15rem;
  border:0;background:transparent;color:var(--black)}
.signup input::placeholder{color:#6F6D67}
.signup input:focus{outline:none}
.signup:focus-within{box-shadow:0 0 0 2px var(--black),0 0 0 4px var(--green-hi)}

/* sections */
section{padding:var(--section) 0}
section + section{border-top:1px solid var(--line)}
h2{font:400 clamp(2.5rem,1.8rem + 3vw,3.75rem)/1 var(--serif);margin:0 0 clamp(1.75rem,4vw,2.5rem);letter-spacing:-.012em;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
h3{font:400 clamp(1.6rem,1.3rem + 1.2vw,2.1rem)/1.1 var(--serif);margin:0 0 .6rem}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}
.portrait{width:min(100%,20rem);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;justify-self:center}

/* writing: a text-only index. Date in the margin, the title carries the row */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.post a{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);padding:clamp(1.5rem,3vw,2rem) 0;
  border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.post .d{font:400 italic 1.1rem/1.2 var(--serif);color:var(--mute);white-space:nowrap;transition:color .15s}
.post .t{font:400 clamp(1.85rem,1.4rem + 1.8vw,2.65rem)/1.05 var(--serif);display:block;margin-bottom:.6rem;letter-spacing:-.008em;text-wrap:balance}
.post a:hover{color:inherit}
.post a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.post a:hover .d{color:var(--green-hi)}
.post .s{display:block;color:var(--sand);font-size:1rem;line-height:1.55;max-width:40rem;text-wrap:pretty}
.post .m{display:block;font-size:.85rem;color:var(--mute);margin-top:.6rem}
.more{margin-top:2.5rem}

/* free resources: equal-height cards, buttons aligned to the bottom */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,1.75rem)}
.offer{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,3vw,2.25rem);transition:border-color .2s}
.offer:hover{border-color:rgba(224,218,210,.6)}
.offer p{margin:0 0 1.75rem;color:var(--sand)}
.offer .btn{margin-top:auto}
.offer .tag{display:flex;align-items:center;gap:.65rem;margin:0 0 .85rem;font:400 italic 1.05rem/1 var(--serif);color:var(--mute)}
.offer .icon{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:50%;color:var(--green-hi);flex:none}

/* card mockups: what you actually get, so the two offers read differently at a glance */
.offer-visual{position:relative;width:100%;height:clamp(12rem,22vw,14.5rem);margin:0 0 1.5rem;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;border:1px solid rgba(224,218,210,.12);
  background:radial-gradient(90% 120% at 50% 0%,rgba(33,130,61,.28),rgba(33,130,61,0) 70%),#070707}
.offer:nth-child(2) .offer-visual{background:radial-gradient(90% 120% at 50% 0%,rgba(224,218,210,.14),rgba(224,218,210,0) 70%),#070707}

.inbox{list-style:none;margin:0;padding:.35rem 0;width:min(88%,22rem);align-self:start;margin-top:1.6rem;background:var(--stone);color:var(--black);
  border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55);font-size:.78rem;line-height:1.3;
  -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);
  transform:rotate(-1.5deg);transition:transform .4s var(--ease)}
.inbox li{display:grid;grid-template-columns:1fr auto;gap:.1rem .5rem;padding:.6rem .9rem .6rem 1.45rem;border-bottom:1px solid #CFCCC4;position:relative}
.inbox li:last-child{border-bottom:0}
.inbox .from{font-weight:500}
.inbox .when{color:#6F6D67;font-size:.92em}
.inbox .subj,.inbox .pre{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox .pre{color:#6F6D67}
.inbox .new::before{content:"";position:absolute;left:.6rem;top:.95rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--green)}
.inbox .new .subj{font-weight:500}

/* guide cover: same cut-off as the inbox, big enough to read the title */
.book{position:relative;width:min(70%,16rem);align-self:start;margin-top:1.6rem;transform:rotate(1.5deg);transition:transform .4s var(--ease);
  -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
/* the cover itself, drawn in type so it stays sharp at any size. Breakwater navy and gold, as on the PDF */
.cover{aspect-ratio:1/1.414;border-radius:4px;padding:7% 8%;color:#fff;container-type:inline-size;
  background:radial-gradient(120% 90% at 85% 15%,#1d3f7a 0%,rgba(29,63,122,0) 60%),linear-gradient(160deg,#16326a,#0c2350 70%);
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1)}
.cover p{margin:0}
.cover-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:5%;margin-bottom:16%;
  border-bottom:1px solid rgba(255,255,255,.14);font:500 4.2cqi/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.cover-top span:last-child{font-size:3.2cqi;letter-spacing:.22em;color:rgba(255,255,255,.6)}
.cover-eyebrow{font:500 3.4cqi/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.24em;text-transform:uppercase;color:#C9A24A;margin-bottom:5%!important}
.cover-title{font:500 11.5cqi/1.04 var(--body);letter-spacing:-.01em;max-width:9em}
.cover-rule{display:block;width:22%;height:1px;background:#C9A24A;margin:7% 0}
.cover-sub{font:400 5cqi/1.5 var(--body);color:rgba(255,255,255,.85);max-width:16em}
@media (prefers-reduced-motion:no-preference){
  .offer:hover .inbox{transform:rotate(0) translateY(-4px)}
  .offer:hover .book{transform:rotate(0) translateY(-4px)}
}

/* ventures */
/* lead venture: story on the left, the ask on the right, a faint green glow tying it to the buttons */
.venture-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  border:1px solid var(--line);border-radius:16px;padding:clamp(1.75rem,4vw,3rem);margin-bottom:2.5rem;
  background:radial-gradient(120% 140% at 0% 0%,rgba(33,130,61,.22),rgba(33,130,61,0) 55%),#050505}
.venture-lead .eyebrow{font:400 italic 1.05rem/1 var(--serif);color:var(--mute);margin:0 0 .75rem}
.venture-lead h3{font-style:italic;font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);line-height:1;margin-bottom:.9rem}
.venture-lead p{margin:0;color:var(--sand);max-width:30rem}
.venture-cta{border-left:1px solid var(--line);padding-left:clamp(1.5rem,4vw,3rem)}
.venture-cta .ask{font:400 clamp(1.5rem,1.2rem + 1vw,1.9rem)/1.1 var(--serif);color:var(--white);margin:0 0 1.1rem}
.venture-cta .btn svg{transition:transform .2s var(--ease)}
.venture-cta .btn:hover svg{transform:translateX(3px)}
.ventures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1.75rem 3rem;padding:0 1rem}
.ventures h3{font-style:italic;font-size:1.7rem;margin-bottom:.35rem}
.ventures p{margin:0;font-size:1rem;color:var(--sand)}
.ventures p a{color:var(--white);text-underline-offset:.25em}

/* founder fitness */
.creed{font:400 italic clamp(1.9rem,1.4rem + 2vw,2.75rem)/1.15 var(--serif);margin:0 0 1rem}

/* stone card: the one light surface, as on the original site */
.card{background:var(--stone);color:var(--black);border-radius:16px;padding:clamp(2rem,5vw,3.75rem);margin:0 1rem var(--section)}
.card h2{color:var(--black);text-decoration:none;font-size:clamp(2rem,1.5rem + 2.2vw,3rem);line-height:1.1;max-width:20em;margin-bottom:1.75rem}
.card .signup{border:1px solid #C9C6BE}
.card .signup:focus-within{box-shadow:0 0 0 2px var(--stone),0 0 0 4px var(--green)}
.card .fine{color:#55534E}
.card a:hover{color:var(--green)}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:1.75rem 0 max(2.25rem,env(safe-area-inset-bottom));font-size:.9rem;color:var(--mute)}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap}
.foot-mark{display:flex;align-items:center;gap:.75rem}
.foot-mark img{width:30px;height:30px;border-radius:4px}
.social{display:flex;gap:0 .35rem;flex-wrap:wrap;margin:0 -.6rem;font:400 1.1rem/1 var(--serif)}
.social a{text-decoration:none;padding:0 .6rem;min-height:var(--tap);display:inline-flex;align-items:center}
.social a:hover{color:var(--white);text-decoration:underline}

/* 7-day challenge: the seven days as a locked teaser. The full day arrives by email */
.days{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.days li{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:clamp(1rem,3vw,2rem);align-items:baseline;
  padding:clamp(1.4rem,3vw,1.85rem) 0;border-bottom:1px solid var(--line)}
.days .num{font:400 italic 3.25rem/.8 var(--serif);color:var(--sand)}
.days h3{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.15rem);margin-bottom:.4rem}
.days p{margin:0;color:var(--sand);max-width:var(--measure)}
.days .lock{font:400 italic 1.05rem/1 var(--serif);color:var(--mute);white-space:nowrap}
.days .lock::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--green-hi);margin:0 .5rem .12rem 0}
.prose ol,.prose ul{padding-left:1.2rem;margin:.4rem 0 .8rem}

.ready{margin-top:1rem}

@media (max-width:820px){
  /* the two-row header scrolls away on phones instead of eating a sixth of the screen */
  .site-head{position:relative}
  .site-head .wrap{grid-template-columns:1fr auto;row-gap:0;padding-block:.5rem .25rem}
  .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -.75rem;font-size:1.1rem}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:0 .75rem;white-space:nowrap}
  html{scroll-padding-top:1rem}
  .split,.offers,.ventures,.venture-lead{grid-template-columns:1fr}
  .venture-cta{border-left:0;border-top:1px solid var(--line);padding:1.5rem 0 0}
  .venture-cta .btn{width:100%}
  .split .portrait{order:-1;justify-self:start;width:11rem}
  .post a{grid-template-columns:1fr;gap:.4rem}
  .ventures{padding:0}
  .card{margin-inline:0;border-radius:14px}
  .days li{grid-template-columns:2.75rem minmax(0,1fr)}
  .days .num{font-size:2.5rem}
  .days .lock{grid-column:2;font-size:.95rem}
  .site-foot .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  /* very narrow phones: keep the email field usable next to the button */
  .signup .btn{padding-inline:1rem;font-size:1.1rem}
  .signup input{padding-left:.9rem}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero h1{animation:rise .8s var(--ease) both}
  .hero .lede,.hero .signup,.hero .prose{animation:rise .8s .08s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(.2em)}to{opacity:1;transform:none}}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup[aria-busy=true] .btn{opacity:.6;pointer-events:none}
[hidden]{display:none!important}