/* ==========================================================================
   home.css — the front door only.

   This file styles index.html and nothing else. The study pages, the studies
   list and the about page all use study.css and are untouched by anything here,
   so the homepage can be redesigned without any risk to the reading pages.

   Colours are sampled from icxclogos.com, not invented. The store's palette is
   warm monochrome — near-black, off-white, stone. There is no gold token on the
   site; the gold you see there lives inside the artwork itself.
   ========================================================================== */

:root{
  color-scheme:dark;

  --ground:#1B1715;      /* store background */
  --ground-deep:#120F0D; /* one step darker, for panels and button text */
  --paper:#E4E1DD;       /* primary text */
  --stone:#ADA79E;       /* secondary text, and the store's button fill */
  --muted:#9B9894;       /* nav, quiet text */
  --line:168,164,159;    /* hairline rules, used at low alpha */

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --util:"Jost",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Uncial Antiqua","Cormorant Garamond",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--paper);
  font-family:var(--util);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}

/* ---------- header ---------- */
.head{border-bottom:1px solid rgba(var(--line),.13)}
.head-inner{
  max-width:1180px;margin:0 auto;padding-inline:24px;padding-block:18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
}
.lockup{display:flex;align-items:center;text-decoration:none;line-height:0;transition:opacity .15s ease}
.lockup img{display:block;width:176px;height:auto}
.lockup:hover{opacity:.78}
@media(max-width:520px){.lockup img{width:138px}}
.head nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-inline-start:auto}
.head nav a{
  font-family:var(--util);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:8px 13px;
  transition:color .18s ease;
}
.head nav a:hover{color:var(--paper)}
.head nav a.out{
  color:var(--stone);margin-inline-start:8px;padding-inline-start:20px;
  border-inline-start:1px solid rgba(var(--line),.2);
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,10vw,108px) clamp(60px,9vw,96px)}

/* Two columns once there is room: the argument on the left, the icon on the
   right. Below 940px the icon moves above the type and shrinks, because on a
   phone it should set the tone in one glance and then get out of the way. */
.hero-grid{display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(48px,6vw,88px)}
}
.hero-copy{min-width:0}

.hero-icon{margin:0;order:-1;justify-self:start;width:min(188px,52vw)}
@media(min-width:940px){.hero-icon{order:0;justify-self:center;width:100%;max-width:400px}}
/* No border: the panel carries its own worn edge, and a CSS frame on top of a
   painted one reads as two frames. The shadow stays — it lifts the icon off the
   ground rather than letting it float flat on it. */
.hero-icon img{
  display:block;width:100%;height:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.45),0 34px 80px -34px rgba(0,0,0,.9);
}
.hero .mark{
  width:min(430px,66vw);height:auto;display:block;margin:0 0 clamp(38px,5.5vw,54px);
}
.eyebrow{
  font-family:var(--util);font-size:11px;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;color:var(--stone);margin:0 0 26px;
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.45rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.019em;
  color:var(--paper);margin:0;max-width:19ch;text-wrap:balance;
}
.hero .sub{
  font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.72;color:var(--stone);
  margin:clamp(28px,4vw,36px) 0 0;max-width:52ch;
}

/* ---------- the stone button, same as the store's ---------- */
.cta{margin-top:clamp(34px,5vw,44px);display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;font-family:var(--util);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;
  background:var(--stone);color:var(--ground-deep);
  padding:16px 30px;border:1px solid var(--stone);
  transition:background .2s ease,color .2s ease;
}
.btn:hover{background:transparent;color:var(--stone)}
.btn.ghost{background:transparent;color:var(--stone);border-color:rgba(var(--line),.34)}
.btn.ghost:hover{border-color:var(--stone);color:var(--paper)}

/* ---------- three points ---------- */
.points{border-top:1px solid rgba(var(--line),.13);padding-block:clamp(60px,9vw,88px)}
.points-grid{display:grid;gap:44px;grid-template-columns:1fr}
@media(min-width:840px){.points-grid{grid-template-columns:repeat(3,1fr);gap:52px}}
.point .n{
  font-family:var(--util);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--stone);display:block;margin:0 0 18px;
}
.point h2{
  font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,2.6vw,1.86rem);
  line-height:1.16;letter-spacing:-.01em;color:var(--paper);margin:0 0 14px;
}
.point p{font-size:.98rem;line-height:1.72;color:var(--stone);margin:0}

/* ---------- closing panel ---------- */
.close-panel{
  border-top:1px solid rgba(var(--line),.13);
  background:var(--ground-deep);
  padding-block:clamp(66px,10vw,104px);
  text-align:center;
}
.close-panel h2{
  font-family:var(--display);font-weight:400;font-size:clamp(2rem,5vw,3.1rem);
  line-height:1.08;letter-spacing:-.016em;color:var(--paper);
  margin:0 auto;max-width:18ch;text-wrap:balance;
}
.close-panel p{
  font-size:1rem;line-height:1.7;color:var(--stone);margin:22px auto 0;max-width:54ch;
}
.close-panel .cta{justify-content:center;margin-top:36px}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(var(--line),.13)}
.foot-inner{
  max-width:1180px;margin:0 auto;padding-inline:24px;padding-block:30px 40px;
  display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;
  font-family:var(--util);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.foot-inner a{color:var(--muted);text-decoration:none;transition:color .18s ease}
.foot-inner a:hover{color:var(--paper)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- unwritten blocks ----------
   Anything still carrying placeholder copy is outlined so it cannot be
   published by accident. Delete the data-todo attribute as you replace each
   block and the outline goes with it. */
[data-todo]{
  outline:1px dashed rgba(var(--line),.42);
  outline-offset:10px;
  border-radius:2px;
}
[data-todo]::before{
  content:"To write";
  display:block;
  font-family:var(--util);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone);opacity:.72;margin-bottom:8px;
}