/* Fishit: site stylesheet.
   Serves the landing page and the generated legal pages, so both share one source
   of truth. The page shell is generic and shared across publishers; this file is
   Fishit's own look and is deliberately unlike any sibling site's:
   a dark ocean palette, serif headings against a sans body, and a manifesto layout
   rather than cards or numbered rows. */

:root{
  --abyss:#08192A;
  --deep:#0E2438;
  --deep-hi:#153048;
  --foam:#DCE8F1;
  --mist:#93ACBF;
  --aqua:#4FC3B0;
  --sand:#E8C07D;
  --line:rgba(147,172,191,.22);
  --maxw:1020px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  /* Serif display, sans body: neither sibling site pairs faces this way. */
  font-family:'Trebuchet MS','Lucida Grande',Tahoma,Verdana,sans-serif;
  background:var(--abyss);
  color:var(--mist);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{font-family:Georgia,'Iowan Old Style','Times New Roman',serif}

.wrap{width:min(var(--maxw),100% - 3rem);margin-inline:auto}

a{color:var(--aqua)}
a:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}

/* ---------- header ---------- */
.bar{
  position:sticky;top:0;z-index:20;
  background:rgba(8,25,42,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar-in{display:flex;align-items:center;justify-content:space-between;
        flex-wrap:wrap;gap:1.2rem;padding:1.05rem 0}
.brand{
  font-family:Georgia,serif;font-size:1.3rem;color:var(--foam);
  text-decoration:none;letter-spacing:.01em;
}
.brand:after{content:'.';color:var(--aqua)}
.menu{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none}
.menu a{
  font-size:.85rem;color:var(--mist);text-decoration:none;
  letter-spacing:.04em;transition:color .2s;
}
.menu a:hover{color:var(--foam)}

/* ---------- hero ----------
   A single wide statement over a horizon glow, rather than a centred block or a
   two-column split. */
.hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 130% at 12% 108%, rgba(79,195,176,.16) 0%, transparent 55%),
    radial-gradient(90% 100% at 88% -10%, rgba(232,192,125,.09) 0%, transparent 50%);
}
.hero-in{padding:clamp(4rem,13vh,8rem) 0 clamp(3.5rem,10vh,6rem)}
.kicker{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aqua);margin-bottom:1.5rem;
}
.hero h1{
  font-size:clamp(2.1rem,6.4vw,4rem);
  line-height:1.08;
  color:var(--foam);
  font-weight:400;
  max-width:22ch;
  margin-bottom:1.5rem;
  text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--aqua)}
.hero .lede{font-size:1.1rem;max-width:48ch}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}
.btn{
  display:inline-block;padding:.8rem 1.7rem;
  font-size:.95rem;text-decoration:none;
  background:var(--aqua);color:#062018;font-weight:bold;
  border:1px solid var(--aqua);border-radius:2px;
  transition:opacity .2s;
}
.btn:hover{opacity:.86}
.btn.line{background:transparent;color:var(--foam);border-color:var(--line);font-weight:normal}
.btn.line:hover{border-color:var(--foam);opacity:1}

/* ---------- manifesto ----------
   Big serif claims, each with one supporting line. No cards, no numbers. */
.block{padding:clamp(3.5rem,9vh,5.5rem) 0}
.eyebrow{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem;
}
.claims{display:grid;gap:2.6rem}
.claim h3{
  font-size:clamp(1.35rem,3.4vw,1.9rem);
  color:var(--foam);font-weight:400;margin-bottom:.5rem;
}
.claim h3 span{color:var(--aqua)}
.claim p{max-width:56ch}

/* ---------- studio panel ---------- */
.panel{
  background:var(--deep);
  border:1px solid var(--line);
  padding:clamp(1.8rem,5vw,3rem);
}
.panel h2{
  font-size:clamp(1.4rem,3.4vw,2rem);color:var(--foam);
  font-weight:400;margin-bottom:1rem;text-wrap:balance;
}
.panel p{max-width:62ch}
.panel p + p{margin-top:.9rem}

/* ---------- contact ---------- */
.contact h2{
  font-size:clamp(1.4rem,3.4vw,2rem);color:var(--foam);
  font-weight:400;margin-bottom:.9rem;
}
.contact p{max-width:50ch;margin-bottom:1.6rem}
.mail{
  font-family:Georgia,serif;font-size:clamp(1.05rem,2.6vw,1.4rem);
  color:var(--foam);text-decoration:none;
  border-bottom:1px solid var(--aqua);padding-bottom:4px;
}
.mail:hover{color:var(--aqua)}

/* ---------- generated legal pages ----------
   Kept on the dark palette for coherence, on a lifted panel with high-contrast
   body text (--foam on --deep is well past AA) and a generous measure. */
.legal{
  background:var(--deep);
  border:1px solid var(--line);
  max-width:min(820px,100% - 3rem);
  margin:clamp(2rem,5vw,3.2rem) auto;
  padding:clamp(1.7rem,4.5vw,3.2rem);
  color:var(--foam);
}

.legal h1{
  font-size:clamp(1.55rem,4vw,2.2rem);
  line-height:1.22;color:var(--foam);font-weight:400;
  margin-bottom:1.4rem;padding-bottom:1.1rem;
  border-bottom:2px solid var(--aqua);
  text-wrap:balance;
}

.legal h2{
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  color:var(--foam);font-weight:400;
  margin-top:2.7rem;margin-bottom:.8rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--line);
}

.legal h3{
  font-size:1.06rem;color:var(--aqua);font-weight:400;
  margin-top:1.9rem;margin-bottom:.5rem;
}

.legal h4,
.legal h5{
  font-family:'Trebuchet MS',Tahoma,sans-serif;
  font-size:.95rem;font-weight:bold;color:var(--foam);
  margin-top:1.4rem;margin-bottom:.35rem;
}

.legal p{color:var(--mist);margin-bottom:1rem}
.legal p strong{color:var(--foam)}

.legal ul,
.legal ol{margin:0 0 1.2rem 1.5rem;color:var(--mist)}
.legal li{margin-bottom:.5rem}
.legal li::marker{color:var(--aqua)}

.legal a{overflow-wrap:break-word}
.legal h1 + p{color:var(--foam);font-size:.95rem}
.legal hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--abyss);padding:2rem 0}
.foot{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;
      align-items:center;font-size:.85rem;color:var(--mist)}
.foot p{margin:0}
.foot nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.foot nav a{color:var(--mist);text-decoration:none}
.foot nav a:hover{color:var(--foam);text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}