/* ============================================================
   ORELHEN — subpage styles (extends mythagate.css + sections.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&display=swap');

/* ---------- MEDIEVAL theme override (Orelhen subpage only) ---------- */
:root{
  /* warm, aged neutrals — parchment & leather instead of cold green-black */
  --bg:          #14110D;
  --surface:     #241D16;
  --surface-2:   #1A1510;
  --border:      #36291D;
  --text:        #EDE6DA;
  --muted:       #B2A691;
  --faint:       #7C6F5C;
  /* forged-bronze accent */
  --mint:        #E2B583;
  --teal:        #A6713C;
  --petrol:      #5C3A1C;
  --teal-glow:   #C98E52;
  --border-lit:  #A6713C55;
  --grad-gate:        linear-gradient(180deg, #E2B583 0%, #A6713C 48%, #5C3A1C 100%);
  --grad-gate-soft:   linear-gradient(160deg, #C98E52 0%, #A6713C 55%, #4A2F15 100%);
}
/* ornate, illuminated-manuscript face for the major titles */
.o-hero h1, .sec-head h2, .finalcta h2{ font-family:'Cinzel Decorative', var(--font-display); font-weight:700; }

/* warm vignette + faint parchment grain across the whole page */
body::after{ content:""; position:fixed; inset:0; z-index:45; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -8%, #C98E5214, transparent 55%),
             radial-gradient(120% 90% at 50% 120%, #5C3A1C22, transparent 60%); }
body::before{ content:""; position:fixed; inset:0; z-index:46; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:140px; }

.btn--primary{ color:#2A1708; box-shadow:0 6px 24px -6px #A6713C66, inset 0 1px 0 #ffffff33; }
.btn--primary:hover{ box-shadow:0 12px 36px -8px #C98E52aa, inset 0 1px 0 #ffffff44; }
.btn--ghost:hover{ box-shadow:0 0 0 1px var(--teal) inset, 0 8px 28px -12px #A6713C66; }
.finalcta{ background:radial-gradient(120% 140% at 50% 0%, #5C3A1C44 0%, transparent 60%), var(--bg); }

/* heraldic flourish beneath centered section titles */
.sec-head.center h2::after{ content:""; display:block; width:132px; height:14px; margin:20px auto 0; opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cg fill='none' stroke='%23A6713C' stroke-width='1.3'%3E%3Cpath d='M4 7H53'/%3E%3Cpath d='M128 7H79'/%3E%3Cpath d='M53 7c4-5 8-5 11 0'/%3E%3Cpath d='M79 7c-4-5-8-5-11 0'/%3E%3C/g%3E%3Cpath d='M66 1l5 6-5 6-5-6z' fill='%23A6713C'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- HERO ---------- */
.o-hero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + clamp(40px,8vh,90px));
  padding-bottom:clamp(60px,9vh,120px);
  background:radial-gradient(120% 120% at 80% 0%, #A6713C26 0%, transparent 55%), var(--bg); }
.o-hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,5vw,70px); align-items:center; }
.o-hero .eyebrow{ margin-bottom:20px; }
.o-hero h1{ margin:0 0 22px; }
.o-hero .lead{ margin:0 0 32px; max-width:46ch; }
.o-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.o-hero-bg{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }

/* hero framed world-map vignette */
.o-mapcard{ position:relative; aspect-ratio:1/.86; border:1px solid var(--border-lit); border-radius:10px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); overflow:hidden;
  box-shadow:0 40px 90px -50px #000, inset 0 1px 0 #ffffff10; }
.o-mapcard .stage{ position:absolute; inset:0; display:grid; place-items:center; padding:6%;
  transform:perspective(900px) rotateX(8deg) scale(1.02); }
.o-mapcard svg{ width:100%; height:100%; filter:drop-shadow(0 18px 30px #00000066); }
.o-mapcard .stage:has(.o-hero-mapimg){ transform:none; padding:7% 5%; }
.o-hero-mapimg{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 26px 36px #00000088); }
.o-mapcard .frame-label{ position:absolute; left:16px; bottom:14px; z-index:3; display:flex; align-items:center; gap:9px;
  font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; }
.o-mapcard .frame-label i{ width:8px;height:10px; background:var(--teal); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.o-mapcard .corner{ position:absolute; width:18px;height:18px; border:1px solid var(--teal-glow); opacity:.5; }
.o-mapcard .corner.tl{ top:12px;left:12px; border-right:0; border-bottom:0; }
.o-mapcard .corner.tr{ top:12px;right:12px; border-left:0; border-bottom:0; }
.o-mapcard .corner.bl{ bottom:12px;left:12px; border-right:0; border-top:0; }
.o-mapcard .corner.br{ bottom:12px;right:12px; border-left:0; border-top:0; }

/* ---------- generic two-col lore (co je) ---------- */
.o-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,64px); align-items:center; }
.o-feats{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:20px; }
.o-feats li{ display:flex; gap:16px; align-items:flex-start; }
.o-feats .ico{ flex:none; width:42px;height:48px; display:grid; place-items:center;
  background:var(--grad-gate-soft); color:#2A1708; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.o-feats .ico svg{ width:20px;height:20px; }
.o-feats b{ display:block; font-family:var(--font-display); font-size:1.08rem; margin-bottom:3px; letter-spacing:.02em; }
.o-feats span{ color:var(--muted); font-size:.95rem; }
.o-portrait{ position:relative; aspect-ratio:4/5; }

/* ---------- FRAKCE ---------- */
.factions{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch; }
.faction{ padding:38px 34px; display:flex; flex-direction:column; overflow:hidden; position:relative; border-top:3px solid var(--fac,#A6713C); }
.faction::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(90% 70% at 50% 0%, var(--fac, #2f9e98)33, transparent 65%); pointer-events:none; }
.faction > *{ position:relative; z-index:1; }
.faction .crest{ width:64px;height:74px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(180deg,#ffffff0c,#ffffff03); border:1px solid var(--fac,#2f9e98);
  clip-path:polygon(50% 0,100% 0,100% 58%,50% 100%,0 58%,0 0); color:var(--fac,#2f9e98); }
.faction .crest svg{ width:30px;height:30px; }
.faction .fac-fig{ margin-bottom:18px; }
.faction .fac-fig img{ display:block; height:120px; width:auto; object-fit:contain;
  filter:drop-shadow(0 12px 18px #00000099); }
.faction h3{ font-family:var(--font-display); font-size:1.7rem; margin:0 0 4px; letter-spacing:.03em; }
.faction .tag{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fac,#2f9e98); margin-bottom:18px; font-weight:600; }
.faction p{ margin:0 0 18px; color:var(--muted); font-size:.98rem; }
.faction ul{ list-style:none; padding:0; margin:auto 0 0; display:grid; gap:10px; }
.faction li{ display:flex; gap:10px; align-items:center; font-size:.92rem; color:var(--text); }
.faction li i{ width:9px;height:11px; flex:none; background:var(--fac,#2f9e98); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.faction--human{ --fac:#C98E52; }
.faction--orc{ --fac:#d98c5f; }
.fac-vs{ display:grid; place-items:center; }
.fac-vs .vs-mark{ height:104px; width:auto; color:#6E4A38; padding:0 22px; }

/* ---------- JAK SE HRAJE ---------- */
.play-steps{ counter-reset:ps; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.play-step{ padding:28px 26px 26px; position:relative; }
.play-step .n{ font-family:var(--font-display); font-size:.9rem; color:var(--teal-glow); letter-spacing:.1em; margin-bottom:14px; display:block; }
.play-step .ico{ width:44px;height:50px; margin-bottom:16px; display:grid; place-items:center;
  border:1px solid var(--border-lit); color:var(--teal-glow); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.play-step .ico svg{ width:21px;height:21px; }
.play-step h3{ font-family:var(--font-display); font-size:1.16rem; margin:0 0 8px; letter-spacing:.02em; }
.play-step p{ margin:0; color:var(--muted); font-size:.93rem; }
.roulette-note{ display:flex; align-items:center; gap:14px; margin-top:30px; padding:18px 22px;
  border:1px solid var(--border-lit); border-radius:8px; background:#A6713C12; }
.roulette-note .spin{ flex:none; width:44px;height:44px; }
.roulette-note p{ margin:0; color:var(--muted); font-size:.95rem; }
.roulette-note b{ color:var(--text); }
.roulette-note .roulette-photo{ flex:none; width:240px; height:auto; margin-left:auto; align-self:center;
  filter:drop-shadow(0 8px 18px #0008); }
@media(max-width:640px){ .roulette-note{ flex-wrap:wrap; } .roulette-note .roulette-photo{ width:180px; margin:6px auto 0; } }

/* ---------- INTERAKTIVNÍ MAPA ---------- */
.map-layout{ display:grid; grid-template-columns:1.45fr .85fr; gap:30px; align-items:start; }
.map-board{ position:relative; border:1px solid #2E2114; border-radius:10px; overflow:hidden; padding:20px;
  background:linear-gradient(118deg,#5E4029 0%,#4A3221 38%,#3C2817 100%);
  box-shadow:inset 0 0 0 6px #1C140C, inset 0 0 0 7px #C98E5240, inset 0 0 80px #00000088; }
.map-board::before{ content:""; position:absolute; inset:7px; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(26deg, #00000016 0 3px, transparent 3px 30px); }
#orelhenMap, #heroMap{ position:relative; z-index:1; }
#orelhenMap svg, #heroMap svg{ filter:drop-shadow(0 4px 3px rgba(0,0,0,.45)); }
.map-cartouche{ position:absolute; top:16px; left:16px; z-index:3; pointer-events:none;
  font-family:'Cinzel Decorative',var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.12em; color:var(--text);
  display:flex; align-items:center; gap:9px; padding:7px 14px; border:1px solid var(--border-lit);
  background:linear-gradient(180deg,#241D16ee,#1A1510ee); box-shadow:0 6px 18px -10px #000; }
.map-cartouche::before{ content:""; width:9px;height:11px; background:var(--teal); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.map-compass{ position:absolute; right:18px; bottom:18px; z-index:3; width:78px; height:78px; opacity:.42; pointer-events:none; color:var(--teal-glow); }
.map-compass svg{ width:100%; height:100%; }
.map-board svg{ width:100%; height:auto; display:block; }
.hexcell{ cursor:pointer; transition:filter .18s; }
.hexcell:hover{ filter:brightness(1.35); }
.hexcell.sel polygon{ stroke:#FFD24A !important; stroke-width:3 !important; }
.hexcell .feat-ring{ pointer-events:none; }
.hexregion{ cursor:pointer; transition:filter .18s; }
.hexregion:hover{ filter:brightness(1.1); }
.hexregion.sel polygon{ stroke:#FFD24A; stroke-width:2.6; }
.hexregion.sel{ filter:brightness(1.06); }
.hexcell:focus, .hexregion:focus, .mapchar:focus{ outline:none; }
.hexcell:focus-visible, .hexregion:focus-visible, .mapchar:focus-visible{ outline:2px solid #FFD24A; outline-offset:2px; }
.mapchar{ cursor:pointer; }
.mapchar circle.tok{ transition:transform .18s; transform-box:fill-box; transform-origin:center; }
.mapchar:hover circle.tok{ transform:scale(1.14); }
.mapchar.sel circle.ring{ stroke:#FFD24A; stroke-width:3; }

.map-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.map-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); }
.map-legend i{ width:14px;height:16px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); flex:none; }

.map-panel{ position:sticky; top:calc(var(--nav-h) + 18px); border:1px solid var(--border); border-radius:10px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); padding:26px 26px 28px; min-height:300px; }
.map-panel .ph-state{ color:var(--faint); }
.map-panel .ph-state .ico{ width:46px;height:52px; margin-bottom:16px; display:grid; place-items:center;
  border:1px dashed var(--border-lit); color:var(--faint); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.map-panel .ph-state .ico svg{ width:22px;height:22px; }
.map-panel .p-tag{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--p-accent,#C98E52); font-weight:600; margin-bottom:12px; }
.map-panel .p-tag i{ width:9px;height:11px; background:var(--p-accent,#C98E52); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.map-panel h3{ font-family:var(--font-display); font-size:1.5rem; margin:0 0 12px; letter-spacing:.02em; }
.map-panel .p-body{ color:var(--muted); font-size:.96rem; line-height:1.62; margin:0; }
.map-panel .p-meta{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); display:grid; gap:8px; }
.map-panel .p-meta div{ display:flex; justify-content:space-between; font-size:.86rem; }
.map-panel .p-meta dt{ color:var(--faint); }
.map-panel .p-meta dd{ margin:0; color:var(--text); font-weight:600; }
.map-hint{ margin-top:14px; font-size:.82rem; color:var(--faint); display:flex; align-items:center; gap:8px; }

/* ---------- POSTAVY (karty) ---------- */
.faction-toggle{ display:flex; width:max-content; padding:5px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface-2); gap:4px; margin:0 auto 28px; }
.faction-toggle button{ border:0; cursor:pointer; background:transparent; color:var(--muted); font-family:var(--font-body);
  font-weight:600; font-size:.9rem; padding:10px 24px; border-radius:999px; transition:all .25s; white-space:nowrap; }
.faction-toggle button.active{ background:var(--grad-gate-soft); color:#2A1708; box-shadow:0 4px 16px -6px #A6713C88; }
.faction-group{ display:none; }
.faction-group.show{ display:grid; }
.chars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.chars.faction-group:not(.show){ display:none; }
.chars.faction-group.show{ display:grid; }
.char-card{ display:flex; flex-direction:column; overflow:hidden; }
.char-card .art{ position:relative; aspect-ratio:3/4; display:grid; place-items:center;
  background:radial-gradient(80% 70% at 50% 28%, #2A2118, #141009); border-bottom:1px solid var(--border); }
.char-card .art img{ width:auto; height:84%; object-fit:contain; filter:drop-shadow(0 14px 20px #00000088); }
.char-card .art .roleico{ position:absolute; top:12px; left:12px; width:34px;height:39px; display:grid; place-items:center;
  background:#0c1011cc; border:1px solid var(--border-lit); color:var(--teal-glow); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.char-card .art .roleico svg{ width:16px;height:16px; }
.char-card .art .hp{ position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:5px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem; color:#ff9b8a;
  background:#0c1011cc; border:1px solid var(--border); border-radius:20px; padding:4px 11px; }
.char-card .art .hp svg{ width:13px;height:13px; }
.char-card .meta{ padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }
.char-card .role{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-glow); margin-bottom:4px; font-weight:600; }
.char-card h3{ font-family:var(--font-display); font-size:1.32rem; margin:0 0 14px; letter-spacing:.02em; }
.char-card .atk{ list-style:none; padding:0; margin:0 0 4px; display:grid; gap:7px; }
.char-card .atk li{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--muted); }
.char-card .atk li .dot{ width:8px;height:9px; flex:none; background:var(--teal); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.char-card .crit{ margin-top:auto; padding-top:14px; }
.char-card .crit .lab{ display:flex; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#e0b65a; font-weight:600; margin-bottom:5px; }
.char-card .crit .lab svg{ width:14px;height:14px; }
.char-card .crit p{ margin:0; font-size:.85rem; color:var(--text); }
.char-card .crit .dmg{ color:#ffb38a; font-weight:600; }

/* ---------- UKÁZKA MODELŮ (toggle) ---------- */
.demo-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.toggle{ display:inline-flex; padding:5px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); gap:4px; }
.toggle button{ border:0; cursor:pointer; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:600;
  font-size:.86rem; padding:9px 18px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; transition:all .25s; white-space:nowrap; }
.toggle button svg{ width:16px;height:16px; }
.toggle button.active{ background:var(--grad-gate-soft); color:#2A1708; box-shadow:0 4px 16px -6px #A6713C88; }
.demo-cat{ margin:0 0 18px; display:flex; align-items:center; gap:12px; }
.demo-cat h3{ font-family:var(--font-display); font-size:1.2rem; margin:0; letter-spacing:.03em; }
.demo-cat .line{ flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
.demo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:46px; }
.demo-item{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--border);
  background:radial-gradient(80% 70% at 50% 26%, #2A2118, #141009); }
.demo-item .layer{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity .4s; }
.demo-item .layer img{ width:auto; height:80%; object-fit:contain; }
.demo-item .l-print{ opacity:0; }
.demo-item .l-print.is-photo img{ width:100%; height:100%; object-fit:cover; }
.demo-item .l-print .printph{ position:absolute; inset:0; display:grid; place-items:center; gap:10px; text-align:center;
  color:var(--faint); font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.05em; padding:18px;
  background:repeating-linear-gradient(135deg,transparent 0 11px, #d98c5f0a 11px 12px), radial-gradient(120% 90% at 50% 18%, #2a2320, #16110e); }
.demo-item .l-print .printph svg{ width:30px;height:30px; color:#d98c5f88; }
.demo.show-print .l-model{ opacity:0; }
.demo.show-print .l-print{ opacity:1; }
.demo-item .cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 14px 12px; font-size:.82rem; color:var(--text);
  background:linear-gradient(0deg,#0c1011ee,transparent); }
.demo-item .stamp{ position:absolute; top:10px; right:10px; z-index:2; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; padding:3px 8px; border-radius:3px; }
.demo .l-model .stamp{ color:#2A1708; background:var(--mint); }
.demo-item .l-print .stamp{ color:#2a1c12; background:#d98c5f; }

/* ---------- LORE ---------- */
.lore-intro{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:clamp(40px,6vw,68px); }
.lore-intro .card{ padding:28px 26px; }
.lore-intro .ico{ width:42px;height:48px; margin-bottom:16px; display:grid; place-items:center;
  background:var(--grad-gate-soft); color:#2A1708; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.lore-intro .ico svg{ width:20px;height:20px; }
.lore-intro h3{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 8px; }
.lore-intro p{ margin:0; color:var(--muted); font-size:.94rem; }
.lore-deep{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; }
.lore-block{ padding:22px 0 22px 24px; border-left:1px solid var(--border); }
.lore-block h4{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 8px; letter-spacing:.02em; display:flex; align-items:center; gap:10px; }
.lore-block h4 i{ width:10px;height:12px; background:var(--teal); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.lore-block p{ margin:0; color:var(--muted); font-size:.93rem; }

/* ---------- FAQ ---------- (moved to sections.css — shared) */

/* ---------- responsive ---------- */
@media (max-width:980px){
  .o-hero .wrap{ grid-template-columns:1fr; }
  .o-mapcard{ max-width:520px; margin-inline:auto; width:100%; }
  .o-split{ grid-template-columns:1fr; gap:30px; }
  .factions{ grid-template-columns:1fr; }
  .fac-vs .vs-mark{ height:64px; padding:0; border:0; }
  .play-steps{ grid-template-columns:repeat(2,1fr); }
  .map-layout{ grid-template-columns:1fr; }
  .map-panel{ position:static; }
  .chars{ grid-template-columns:repeat(3,1fr); }
  .demo-grid{ grid-template-columns:repeat(3,1fr); }
  .lore-intro{ grid-template-columns:1fr; }
  .lore-deep{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .play-steps{ grid-template-columns:1fr; }
  .chars{ grid-template-columns:repeat(2,1fr); }
  .demo-grid{ grid-template-columns:repeat(2,1fr); }
  .demo-head{ flex-direction:column; align-items:flex-start; }
}