/* =========================================================
   ORTIQAE — "La mia storia" + bridge / story-card on home
   Mediterranean accent (#1C5D7A) on the same ecru paper.
   Loads on top of ortiqa-home.css.
   ========================================================= */

:root{
  --med:      #2B4C59;   /* OUTERSPACE blue — profile / personal sections */
  --med-2:    #1F3A45;   /* deeper */
  --med-soft: #D6E0E2;   /* tint on paper */
  --med-mark: #BCD0D4;   /* highlighter swipe (blue) */
  --med-on:   #EBF1F2;   /* light text on blue */
}

/* ============== BRIDGE PHRASE (home, between sections) ============== */
.bridge .bridge-line{
  max-width:30ch;margin:0 auto;text-align:center;text-wrap:balance;
  font-family:var(--serif);font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(24px,3.4vw,42px);line-height:1.22;color:var(--ink);
  max-inline-size:24ch;
}
.bridge .wrap{max-width:1000px}
.bridge .bridge-line{max-width:none}
.bridge .bridge-line mark{
  background:transparent;color:var(--ink);position:relative;padding:0 .04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.bridge .bridge-line mark::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:.04em;top:.5em;z-index:-1;
  background:var(--marker);border-radius:.6em .3em .5em .35em / .8em .55em .7em .5em;
  transform:rotate(-.5deg);mix-blend-mode:multiply;
}

/* ============== STORY MICRO-CARD (home, under founder caption) ============== */
.storia-card{
  display:flex;align-items:center;gap:18px;margin-top:20px;
  background:var(--med);color:var(--med-on);
  border-radius:var(--r-sm);padding:18px 20px;
  box-shadow:0 14px 30px -16px color-mix(in oklab,var(--med) 80%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.storia-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 40px -16px color-mix(in oklab,var(--med) 78%,transparent)}
.storia-card .sc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.storia-card .sc-k{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-0.01em;color:#fff}
.storia-card .sc-sub{font-size:13px;line-height:1.4;color:color-mix(in oklab,var(--med-on) 82%,transparent)}
.storia-card .sc-arr{flex:none;width:40px;height:40px;border-radius:50%;
  background:color-mix(in oklab,#fff 16%,transparent);display:grid;place-items:center;
  transition:transform .3s var(--ease),background .3s}
.storia-card .sc-arr svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;transition:transform .3s var(--ease)}
.storia-card:hover .sc-arr{background:color-mix(in oklab,#fff 26%,transparent)}
.storia-card:hover .sc-arr svg{transform:translateX(3px)}
.storia-card:focus-visible{outline:2px solid var(--med-2);outline-offset:3px}

/* =========================================================
   THE STORY PAGE — re-theme to mediterranean blue
   ========================================================= */
body.storia-page{
  --brand:var(--med); --brand-2:var(--med-2); --brand-soft:var(--med-soft);
  --marker:var(--med-mark); --on-brand:var(--med-on);
}

/* nav — back link + page title */
.storia-page .nav-inner{justify-content:space-between}
.storia-page .nav-back .back svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- HERO ---------- */
.st-hero{padding:148px 0 56px;position:relative}
.st-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 64% at 82% 4%, color-mix(in oklab,var(--med) 18%,transparent), transparent 70%)}
.st-hero .st-eyebrow{margin-bottom:24px}
.st-hero h1{font-size:clamp(46px,7vw,92px);margin:0;max-width:14ch}
.st-hero .st-lead{margin:30px 0 0;max-width:60ch;font-size:clamp(18px,2.1vw,22px);
  line-height:1.6;color:var(--body);text-wrap:pretty}
.st-hero .st-lead b{color:var(--ink);font-weight:600}

/* ---------- CAROUSEL ---------- */
.carousel{margin-top:clamp(40px,5vw,64px)}
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.carousel-head .ck{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.carousel-nav{display:flex;gap:10px}
.carousel-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;color:var(--ink);background:var(--surface);
  transition:border-color .25s,background .25s,transform .25s,color .25s}
.carousel-nav button:hover{border-color:var(--med);background:var(--med);color:#fff;transform:translateY(-2px)}
.carousel-nav button:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line);background:var(--surface);color:var(--ink)}
.carousel-nav button svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.carousel-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 0 14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 clamp(280px,40vw,460px);scroll-snap-align:start;
  aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:var(--med-soft);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.carousel-slide.wide{flex-basis:clamp(360px,56vw,640px);aspect-ratio:16/10}
.carousel-slide image-slot{width:100%;height:100%;display:block}
@media (max-width:640px){ .carousel-slide{flex-basis:82vw} .carousel-slide.wide{flex-basis:82vw} }

/* ---------- STORY SECTIONS ---------- */
.st-block{max-width:760px}
.st-block.center{margin:0 auto;text-align:center}
.st-block .st-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--med-2)}
.st-block h2{font-size:clamp(30px,4vw,52px);margin:16px 0 0}
.st-block h2 .hl{position:relative;color:var(--ink)}
.st-block h2 .hl::after{content:"";position:absolute;left:-1.5%;right:-1.5%;top:.16em;bottom:.06em;z-index:-1;
  background:var(--med-mark);border-radius:.7em .35em .6em .4em / .9em .6em .8em .5em;
  transform:rotate(-.6deg);mix-blend-mode:multiply}
.st-block p{font-size:clamp(16.5px,1.9vw,18.5px);line-height:1.7;color:var(--body);margin-top:22px;text-wrap:pretty}
.st-block p + p{margin-top:16px}
.st-block p b{color:var(--ink);font-weight:600}
.st-block .st-named{color:var(--med);font-weight:600}

/* optional inline media for a story block */
.st-media{margin-top:34px;border-radius:var(--r);overflow:hidden;
  background:var(--med-soft);border:1px solid var(--line-2);box-shadow:var(--shadow-sm);aspect-ratio:16/9}
.st-media.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:none;border:none;box-shadow:none;aspect-ratio:auto}
.st-media.pair > div{border-radius:var(--r);overflow:hidden;background:var(--med-soft);
  border:1px solid var(--line-2);box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.st-media image-slot{width:100%;height:100%;display:block}

/* ---------- TIMELINE (hands-on / hackathons) ---------- */
.timeline{margin-top:40px;position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--med),color-mix(in oklab,var(--med) 20%,transparent))}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-34px;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:2px solid var(--med);box-shadow:0 0 0 4px var(--bg)}
.tl-item .tl-when{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--med-2)}
.tl-item h3{font-size:clamp(20px,2.4vw,26px);margin:8px 0 0;color:var(--ink);letter-spacing:-0.01em}
.tl-item p{font-size:16px;line-height:1.62;color:var(--body);margin-top:10px;max-width:64ch}
.tl-item .tl-todo{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--med-2);background:var(--med-soft);border:1px dashed color-mix(in oklab,var(--med) 40%,transparent);
  border-radius:999px;padding:6px 12px}

/* ---------- CLOSING ---------- */
.st-closing{text-align:center;max-width:900px;margin:0 auto}
.st-closing blockquote{font-family:var(--serif);font-weight:600;letter-spacing:-0.025em;
  font-size:clamp(30px,5vw,60px);line-height:1.1;color:var(--ink);text-wrap:balance}
.st-closing .st-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-top:40px}
.st-closing .st-back{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.st-closing .st-back:hover{color:var(--ink)}
.st-closing .st-back svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

@media (max-width:680px){
  .st-media.pair{grid-template-columns:1fr}
}