/* ============================================================
   miiatikkala.fi — yhteinen tyylitiedosto kaikille sivuille
   ============================================================ */

:root{
  color-scheme:light;
  --paper:#eef0f2;
  --paper-deep:#e3e7ea;
  --ink:#141b26;
  --ink-soft:#4a5462;
  --rule:#c3cbd2;
  --strike:#8b2049;
}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14121a;
  --paper-deep:#1c1926;
  --ink:#e8e4ee;
  --ink-soft:#9a93a6;
  --rule:#2c2836;
  --strike:#c9455f;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#14121a;
    --paper-deep:#1c1926;
    --ink:#e8e4ee;
    --ink-soft:#9a93a6;
    --rule:#2c2836;
    --strike:#c9455f;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Karla,system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  transition:background-color .2s ease,color .2s ease;
}
.wrap{max-width:38rem;margin:0 auto;padding:0 1.5rem}

/* teemanappi */
#theme-toggle{
  position:fixed;top:1rem;right:1rem;z-index:10;
  background:var(--paper-deep);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:999px;
  width:2.5rem;height:2.5rem;
  font-size:1rem;line-height:1;
  cursor:pointer;
}
#theme-toggle:focus-visible{outline:2px solid var(--strike);outline-offset:2px}

/* hero (etusivu) */
header{padding:5.5rem 0 3rem}
h1{
  font-family:Fraunces,Georgia,serif;
  font-weight:600;
  font-size:clamp(3rem,13vw,5.25rem);
  line-height:.92;
  letter-spacing:-.02em;
  margin:0;
}
.lede{font-size:1.2rem;line-height:1.5;margin:0;max-width:30rem}
.where{margin:1.25rem 0 0;color:var(--ink-soft);font-size:.95rem}
.where a{color:var(--ink-soft)}

section{padding:3rem 0;border-top:1px solid var(--rule)}

h2{
  font-family:Fraunces,Georgia,serif;
  font-weight:600;font-size:1.6rem;line-height:1.2;
  margin:0 0 1.25rem;letter-spacing:-.01em;
}
p{margin:0 0 1.1rem;max-width:34rem}
p:last-child{margin-bottom:0}

/* ---------- Työt: kompaktit kortit ---------- */
#tyot{padding:56px 0;border-top:1px solid var(--paper-deep)}
#tyot-otsikko{
  font-family:Fraunces,Georgia,serif;
  font-weight:500;
  font-size:clamp(26px,4vw,34px);
  line-height:1.2;letter-spacing:-.01em;
  margin:0 0 32px;
}
.cards{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.card{
  position:relative;
  border:1px solid var(--rule);
  padding:24px 24px 20px;
  display:flex;flex-direction:column;
  background:var(--paper);
  transition:border-color .15s ease,background-color .15s ease;
}
.card:hover{border-color:var(--strike);background:var(--paper-deep)}
.card:focus-within{border-color:var(--strike)}
.status{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.card h3{
  font-family:Fraunces,Georgia,serif;
  font-weight:500;font-size:25px;line-height:1.25;
  margin:8px 0 4px;
}
.card_desc{margin:0 0 16px;font-size:16px;color:var(--ink-soft)}
.card-foot{
  margin:18px 0 0;padding-top:14px;
  border-top:1px solid var(--strike);
  font-size:15px;
}
.more{color:var(--ink);text-decoration:none}
.more:hover{text-decoration:underline;text-decoration-color:var(--strike);text-underline-offset:4px}
/* koko kortti on klikattava, mutta linkki on yksi ja oikea */
.card .more::after{content:"";position:absolute;inset:0}
.more:focus-visible{outline:none}

/* työkalu-chipit */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;line-height:1.4;
  padding:3px 8px;
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--ink-soft);
  background:var(--paper-deep);
}

/* ---------- osaaminen ---------- */
dl{margin:0}
dt{font-weight:700;font-size:.95rem;margin-top:1.25rem}
dt:first-of-type{margin-top:0}
dd{margin:.15rem 0 0;color:var(--ink-soft);font-size:.98rem}

/* ---------- cv + yhteys ---------- */
.cv{
  display:inline-block;
  font-weight:700;font-size:1rem;
  background:var(--ink);color:var(--paper);
  padding:.85rem 1.5rem;border-radius:2px;
  text-decoration:none;
}
.cv:focus-visible{outline:3px solid var(--strike);outline-offset:3px}
.contact a{color:var(--ink);text-decoration-color:var(--strike);text-underline-offset:3px}

footer{
  padding:2.5rem 0 4rem;border-top:1px solid var(--rule);
  color:var(--ink-soft);font-size:.85rem;
}
footer a{color:var(--ink-soft)}
a:focus-visible{outline:2px solid var(--strike);outline-offset:2px}

/* ============================================================
   Case-sivut
   ============================================================ */
.case-top{padding:1.5rem 0 0}
.back{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.06em;
  color:var(--ink-soft);text-decoration:none;
}
.back:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--strike);text-underline-offset:4px}

.case-hero{padding:3.5rem 0 2.5rem}
.case-hero h1{font-size:clamp(2.6rem,11vw,4.25rem);margin-top:.5rem}
.case-hero .strike-line{width:100%;height:2px;border:0;background:var(--strike);margin:1.5rem 0 1.25rem}
.case-hero .lede{margin-bottom:1.25rem}

.case-body section{padding:2.25rem 0}
.case-body h2{font-size:1.35rem;margin-bottom:.9rem}
.label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:.35rem;
}
.steps{margin:0;padding-left:1.2rem}
.steps li{margin:0 0 .6rem;padding-left:.2rem}
.steps li::marker{color:var(--strike)}

.live-link{
  display:inline-block;margin-top:.5rem;
  font-weight:700;
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--strike);
  padding-bottom:2px;
}
.live-link:hover{color:var(--strike)}

.cta{
  background:var(--paper-deep);
  border-left:3px solid var(--strike);
  padding:1.25rem 1.25rem 1.25rem 1.4rem;
  margin:2.5rem 0 0;
}
.cta p{margin:0}
.cta a{color:var(--ink);text-decoration-color:var(--strike);text-underline-offset:3px}

/* kaavio */
figure.diagram{margin:1.25rem 0 0}
figure.diagram svg{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
figure.diagram figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:.75rem;text-align:center}
.d-box{fill:var(--paper-deep);stroke:var(--rule);stroke-width:1.2}
.d-box.hot{stroke:var(--strike);stroke-width:1.6}
.d-title{fill:var(--ink);font-family:Karla,system-ui,sans-serif;font-size:14px;font-weight:700}
.d-sub{fill:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px}
.d-line{stroke:var(--strike);stroke-width:1.6;fill:none}
.d-head{fill:var(--strike)}

/* promptit */
.tradition{padding:1.75rem 0;border-top:1px solid var(--rule)}
.tradition:first-of-type{border-top:0;padding-top:0}
.tradition h3{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.3rem;margin:0 0 .35rem}
.tradition .meta{margin-bottom:.6rem}
details.prompt{
  margin-top:1rem;
  border:1px solid var(--rule);
  background:var(--paper-deep);
}
details.prompt summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;font-size:.95rem;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
details.prompt summary::-webkit-details-marker{display:none}
details.prompt summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--strike);font-size:1.1rem}
details.prompt[open] summary::after{content:"–"}
details.prompt summary:focus-visible{outline:2px solid var(--strike);outline-offset:-2px}
.prompt-text{
  margin:0;padding:0 16px 8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;line-height:1.6;
  white-space:pre-wrap;word-wrap:break-word;
  color:var(--ink);
}
.copy{
  margin:0 16px 16px;
  font:inherit;font-size:13px;font-weight:700;
  background:var(--ink);color:var(--paper);
  border:0;border-radius:2px;
  padding:.5rem .9rem;cursor:pointer;
}
.copy:focus-visible{outline:2px solid var(--strike);outline-offset:2px}
.todo{color:var(--ink-soft);font-style:italic;font-size:.95rem}

/* ============================================================
   Mie-sivu — persoonallisempi puoli
   ============================================================ */
:root{--amber:#b8620c}
[data-theme="dark"]{--amber:#f0953a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--amber:#f0953a}}

.mie-hero{padding:3.5rem 0 2.5rem}
.manifesto{
  font-size:clamp(2.6rem,11vw,4.5rem);
  line-height:1;margin-top:.6rem;
}
.manifesto span{display:block}
.manifesto s{
  text-decoration-color:var(--strike);
  text-decoration-thickness:.09em;
  color:var(--ink-soft);
}
.manifesto .hot{color:var(--strike)}
.mie-hero .strike-line{width:100%;height:2px;border:0;background:var(--strike);margin:1.75rem 0 1.25rem}

.aside{
  font-family:Fraunces,Georgia,serif;font-style:italic;
  font-size:1.35rem;line-height:1.35;
  color:var(--ink);
  margin-top:1.5rem;
}

/* "Myös tätä": rivit syttyvät kuin lamput */
.lamps{list-style:none;margin:0;padding:0}
.lamps li{
  position:relative;
  padding:.55rem 0 .55rem 1.6rem;
  border-bottom:1px solid var(--rule);
  transition:color .25s ease;
}
.lamps li:last-child{border-bottom:0}
.lamps li::before{
  content:"";position:absolute;left:.2rem;top:1.15rem;
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--rule);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.lamps li:hover::before,.lamps li:active::before{
  background:var(--amber);
  box-shadow:0 0 10px 3px color-mix(in srgb,var(--amber) 55%,transparent);
}

/* kellari */
details.cellar{
  border:1px solid var(--rule);
  background:var(--paper-deep);
}
details.cellar summary{
  cursor:pointer;list-style:none;
  padding:14px 16px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;
  color:var(--ink-soft);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
details.cellar summary::-webkit-details-marker{display:none}
details.cellar summary::after{content:"↓";color:var(--strike)}
details.cellar[open] summary::after{content:"↑"}
details.cellar summary:focus-visible{outline:2px solid var(--strike);outline-offset:-2px}
.cellar-in{padding:0 16px 16px}

/* alatunniste + piilotettu tölkki */
.mie-foot{position:relative}
.motto{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1rem;color:var(--ink);margin-bottom:.75rem}
.can{
  position:absolute;right:0;bottom:4.2rem;
  color:var(--ink-soft);opacity:.18;cursor:help;
  transition:opacity .2s ease,transform .2s ease;
}
.can:hover,.can:focus{opacity:1;transform:rotate(-12deg)}
.can:focus-visible{outline:2px solid var(--strike);outline-offset:3px}

/* etusivun "Lue lisää" */
.readmore{margin-top:1.5rem}

@media (prefers-reduced-motion:reduce){
  .lamps li,.lamps li::before,.can{transition:none}
  .can:hover,.can:focus{transform:none}
}