/* CraftyPuzzles 2026 illustrated redesign — sitewide visual layer */
:root{
  --ink:#182733; --muted:#53616b; --paper:#fff9f0; --surface:#fffefa; --surface-alt:#f6ebd9;
  --green:#123641; --green-2:#215465; --gold:#b16b24; --gold-soft:#fbeacb;
  --orange:#bc732b; --border:#e6d8c5;
  --shadow:0 20px 54px rgba(40,31,20,.13); --radius:18px; --wrap:1260px;
}
html{scroll-padding-top:100px}
body{background:var(--paper); background-image:radial-gradient(circle at 10% 6%,rgba(203,152,80,.065),transparent 32%),radial-gradient(circle at 95% 22%,rgba(43,102,108,.04),transparent 26%);font-size:16px}
h1,h2,h3,.brand strong{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.025em}
h1,h2,h3{font-weight:750}
a{color:#175366}
a:hover{color:var(--gold)}
.eyebrow{letter-spacing:.13em;color:var(--gold);font-size:.75rem}
.wrap{width:min(calc(100% - 3rem),var(--wrap))}
.site-header{background:rgba(13,40,49,.98);border-bottom:1px solid rgba(236,183,106,.26);box-shadow:0 5px 18px #061d2540;backdrop-filter:blur(16px)}
.header-inner{min-height:80px;gap:1.25rem}
.brand-logo{flex:0 0 auto;max-width:260px}
.brand-logo picture{display:block;width:100%}
.brand-logo img{display:block;width:clamp(162px,18vw,252px);height:auto;max-width:100%;border-radius:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.site-nav ul{gap:.05rem}
.site-nav a{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; font-size:.84rem;color:#f4eee1;padding:.65rem .62rem;border-radius:.45rem;font-weight:650;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current=page]{background:rgba(238,190,104,.10);color:#ffcb83}
.site-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 #edb060;border-radius:0}
.header-cta{display:inline-flex;align-items:center;white-space:nowrap;justify-content:center;gap:.55rem;background:linear-gradient(135deg,#ffdc9c,#d79648);padding:.76rem 1.15rem;border-radius:999px;color:#322009;text-decoration:none;font-weight:800;font-size:.84rem;box-shadow:0 5px 16px #080d1340;transition:transform .2s ease,filter .2s ease}
.header-cta:hover{transform:translateY(-2px);filter:brightness(1.07);color:#322009}
.header-cta::before{content:'';display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;position:relative;transform:scale(.7);box-shadow:6px 6px 0 -4px currentColor}
.nav-toggle{color:#fff;background:#1d4551;border-color:#5e7d80}
.button{background:linear-gradient(135deg,#c78b41,#9c581f);border-color:#a9692c;border-radius:999px;box-shadow:0 7px 16px rgba(130,80,26,.17);transition:transform .2s ease,box-shadow .2s ease;min-height:47px;padding:.7rem 1.35rem}
.button:hover{background:#96551e;border-color:#96551e;transform:translateY(-2px);box-shadow:0 10px 19px rgba(130,80,26,.24)}
.button-secondary{background:transparent;border-color:#b98548;color:#8e511d;box-shadow:none}
.button-secondary:hover{background:#fff0d5;color:#6d3e17;border-color:#b98548}
.text-link{color:#164c5c;align-items:center;gap:.55rem}
.text-link:hover{color:#a26123}
.section{padding:clamp(3rem,5.4vw,5.5rem) 0}
.section-alt{background:linear-gradient(128deg,#f6ebd9,#fff9f0 70%);border-block:1px solid #eee0ce}
.section-heading{gap:1.2rem;align-items:center;margin-bottom:1.8rem}
.section-heading h2{font-size:clamp(1.8rem,3.2vw,2.75rem);margin:.15rem 0 .2rem;color:#162d39}
.section-heading .eyebrow{margin-bottom:.15rem}
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.category-card{position:relative;overflow:hidden;min-height:200px;padding:1.35rem;border-color:var(--border);box-shadow:0 7px 25px #73522e12;background:linear-gradient(145deg,#fffefa,#fff7eb);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.category-card:hover,.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #5a432522;border-color:#dfb980}
.category-card::before{content:'✦';position:absolute;top:.75rem;right:1.15rem;font-size:1.1rem;color:#d1ab76;opacity:.75}
.category-card h3{font-size:1.38rem;color:#1d303b}
.category-card p{font-size:.94rem;line-height:1.5}
.category-card span{color:#a76525}
.card-grid{gap:1.15rem}
.card{border:1px solid #e6d8c5;background:#fffdf8;box-shadow:0 8px 22px #5c422118;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card-image{background:linear-gradient(150deg,#f5e2c9,#fffaf1);border-bottom:1px solid #e8d9c7}
.card-image img{mix-blend-mode:multiply}
.card-body{padding:1.05rem 1.12rem 1.2rem}
.card h2,.card h3{font-size:1.23rem;line-height:1.3}
.badge{background:#f8ebd8;color:#805022;padding:.3rem .65rem}
.badge-good{background:#e7f2e9;color:#246748}.badge-warn{background:#fff1cb;color:#795114}
.page-hero{position:relative;overflow:hidden;color:#fcf6e9;background:linear-gradient(96deg,rgba(10,35,45,.99) 0%,rgba(12,40,49,.99) 46%,rgba(12,40,49,.68) 100%),url('/assets/images/puzzle-hero-showcase.webp') right center/auto 130% no-repeat; border-bottom:4px solid #b97833;padding:clamp(2.45rem,4.8vw,4.5rem) 0}
.page-hero::after{content:'';position:absolute;right:4%;bottom:-88px;height:240px;width:240px;border:1px solid rgba(238,175,103,.19);border-radius:42%;transform:rotate(30deg);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:20ch;color:#fff8e9;text-shadow:0 2px 12px #0b2833;font-size:clamp(2rem,4vw,3.6rem)}
.page-hero .lead{color:#f1e2cb;max-width:66ch}
.page-hero .eyebrow{color:#eebc78}
.page-hero .button-secondary{color:#fff3da;border-color:#e9bd81}.page-hero .button-secondary:hover{color:#37210d}
.breadcrumbs a{color:#efc78d}.breadcrumbs li:not(:last-child)::after{color:#c0a886}
.page-hero .breadcrumbs li[aria-current]{color:#fff0d7}
.page-hero .archive-notice{color:#34291e}
.search-panel,.finder-controls,.puzzle-summary,.history-side,.photo-id-form,.photo-id-help,.contribution-form,.source-panel{box-shadow:0 11px 28px #57472c16;border:1px solid #e4d3bc;background:#fffef9}
.field input,.field select{border-color:#c9b8a0;border-radius:.7rem}
.field input:focus,.field select:focus{border-color:#b77f36}
.solution-details,.hint-detail{border-color:#dfcdb5;background:#fffefa;box-shadow:0 4px 14px #987d5510}
.solution-details summary,.hint-detail summary{color:#164554}
.solution-steps li::before,.hanoi-disc{background:#204f5f}
.timeline>div{box-shadow:0 6px 18px #51381715}.timeline::before{background:#c99554}
.related-links a,.type-grid article{box-shadow:0 6px 18px #51381712}
.site-footer{background:#0e2c36 url('/assets/images/woodgrain-tile.webp') bottom center/auto 58px repeat-x;color:#e9ebe8;border-top:5px solid #ba813f;margin-top:2.3rem; padding-top:3.4rem}
.site-footer .wrap{position:relative}
.site-footer h2{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.94rem;color:#ffd59c;text-transform:uppercase;letter-spacing:.11em}
.site-footer a{color:#fbf1e4;transition:color .2s ease}
.site-footer a:hover{color:#ffcc86}
.site-footer .brand-footer img{border:0;border-radius:12px;background:rgba(255,255,255,.09);padding:.1rem}
.site-footer .brand-footer strong{font-size:1.35rem;color:#eab77b}
.site-footer p{color:#d6e0de;font-size:.93rem}
.site-footer ul li{padding:.12rem 0}
.site-footer .footer-bottom{background:rgba(0,0,0,.16);border-top-color:#ffffff2c;padding:1.3rem 0}
/* Homepage: oversized atmospheric hero inspired by the approved visual mock-up */
.home-redesign .hero{position:relative;overflow:hidden;min-height:590px;display:flex;align-items:center;background:radial-gradient(ellipse at 43% 36%,rgba(28,80,77,.39),transparent 58%),linear-gradient(110deg,#0d303b 0%,#0b2834 53%,#3f2619 100%);color:#fff;border-bottom:5px solid #b77b3c;padding:clamp(3.5rem,6vw,5.5rem) 0}
.home-redesign .hero::after{content:'';position:absolute;inset:auto 0 0; height:100px; background:linear-gradient(0deg,rgba(5,23,29,.9),transparent);pointer-events:none}
.home-redesign .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:52% 48%;gap:0;min-height:420px}
.home-redesign .hero-copy{position:relative;z-index:3;padding:1.2rem 0 1rem 0;max-width:730px}
.home-redesign .hero .eyebrow{color:#f4c78f;font-size:.83rem;margin-bottom:1.1rem;letter-spacing:.17em}
.home-redesign .hero h1{font-size:clamp(2.7rem,4.2vw,4.5rem);max-width:20ch;font-family:Georgia,serif;line-height:1.05;letter-spacing:-.045em;text-shadow:0 2px 6px #092631}
.home-redesign .hero h1 em{color:#efb66f;font-style:normal}
.home-redesign .hero .lead{font-size:1.08rem;max-width:58ch;line-height:1.65;color:#f0eae1;margin-bottom:1.3rem}
.home-redesign .hero-art{position:relative;min-height:465px;align-self:stretch;margin-right:calc((min(100vw,1260px) - 100vw)/2);z-index:1}
.home-redesign .hero-art::before{content:'';position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,#0d303b 0%,rgba(13,48,59,.34) 21%,transparent 47%),linear-gradient(0deg,rgba(4,25,32,.17),transparent 40%);pointer-events:none}
.home-redesign .hero-art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:52% center;filter:saturate(1.08) contrast(1.025)}
.home-redesign .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.home-redesign .hero .button-secondary{border-color:#ebc48b;color:#ffe2b4}.home-redesign .hero .button-secondary:hover{background:#ebc48b;color:#22343c}
.home-search{display:flex;align-items:stretch;max-width:690px;width:100%;min-height:58px;box-shadow:0 16px 27px #030d1652;border-radius:999px;overflow:hidden;background:#fff}
.home-search label{display:flex;flex:1;align-items:center;gap:.7rem;color:#465e66;min-width:0;padding:0 1.15rem}
.home-search label::before{content:'⌕';font-family:Georgia,serif;font-size:2rem;line-height:1;color:#8f6639}
.home-search input{font-size:1rem;border:0;outline:0;min-width:0;width:100%;background:transparent;color:#172b37}
.home-search input::placeholder{color:#677178}
.home-search button{border:3px solid white;color:#31200e;border-radius:999px;min-width:132px;background:linear-gradient(135deg,#ffd38b,#c98739);font-weight:850;cursor:pointer}
.home-search button:hover{filter:brightness(1.07)}
.home-chips{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.85rem;font-size:.78rem;color:#f6eadd}
.home-chips a{border:1px solid #d3b69b88;color:#fff6e9;border-radius:999px;padding:.25rem .55rem;text-decoration:none;background:#142b33a8}
.home-chips a:hover{background:#e5b77f;color:#1b2c32}
.home-route-section{background:#fff9f0;padding:1.65rem 0 3.4rem}
.home-route-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:.7rem}
.home-route{display:flex;min-height:240px;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;padding:1.2rem .75rem 1rem;background:linear-gradient(155deg,#fffefb,#fff9ee);border:1px solid #e4d3bd;border-radius:16px;text-decoration:none;color:#223544;box-shadow:0 8px 24px #54402110;transition:.23s ease}
.home-route:hover{transform:translateY(-5px);box-shadow:0 18px 31px #6d4b2c24;border-color:#ca9c62;color:#18313d}
.home-route .route-image{width:100%;height:110px;display:grid;place-items:center;margin-bottom:.65rem}
.home-route .route-image img{width:100%;height:106px;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 6px 4px #322b2526)}
.home-route h3{font-size:1.17rem;margin:.15rem 0 .4rem}
.home-route p{font-size:.8rem;line-height:1.42;color:#5c6770;margin:0 0 .7rem}
.home-route .round-arrow{display:grid;place-items:center;margin-top:auto; width:30px;height:30px;border-radius:50%;background:#a96d2f;color:#fff;font-weight:800}
.home-shortcuts{margin-top:1.6rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-size:.87rem;color:#5b666a}
.home-shortcuts a{background:#fff8eb;color:#174e5a;border:1px solid #dfc8ab;border-radius:999px;text-decoration:none;padding:.35rem .8rem;font-weight:700}
.home-shortcuts a:hover{background:#f5dbb2}
.section-featured{background:linear-gradient(#fffaf1,#fff8eb)}
.section-featured .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.section-featured .card-image{min-height:185px;padding:1.2rem .95rem .7rem; background:radial-gradient(ellipse at center,#fff1d7,#e7c7a4)}
.section-featured .card-image img{height:175px}
.section-featured .card-body h3{margin:.45rem 0}
.section-featured .card-meta{font-size:.82rem;line-height:1.45}
.section-featured .badge-row .badge{font-size:.68rem}
.home-games-section{background:linear-gradient(100deg,#e5f1f0,#f3faf6);padding:3rem 0}
.home-games-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,2fr);gap:1.5rem;align-items:stretch}
.home-games-intro{padding:1rem 1.5rem 1rem 0}
.home-games-intro h2,.home-history-intro h2{font-size:clamp(2rem,3vw,3rem);margin:.4rem 0}
.home-games-intro p,.home-history-intro p{color:#44545b;margin-bottom:1.25rem}
.home-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
.home-game-card{display:flex;flex-direction:column;background:#fffefa;border:1px solid #d7e3e0;border-radius:16px;padding:.65rem;text-decoration:none;color:#172e38;box-shadow:0 8px 16px #22445014;transition:.2s ease}
.home-game-card:hover{transform:translateY(-5px);border-color:#bd8a4a;box-shadow:0 14px 25px #2244502b}
.home-game-card .game-thumb{display:grid;place-items:center;min-height:130px;position:relative;border-radius:10px;background:linear-gradient(135deg,#e1edf0,#a9ced3);overflow:hidden}
.game-thumb .game-visual{display:inline-block;font-size:4.5rem;filter:drop-shadow(0 7px 5px #1c262533)}
.home-game-card:nth-child(2) .game-thumb{background:linear-gradient(135deg,#70462c,#b37e49)}
.home-game-card:nth-child(3) .game-thumb{background:linear-gradient(135deg,#164b5b,#519493)}
.home-game-card h3{font-size:1.05rem;margin:.7rem .4rem .1rem}
.home-game-card p{font-size:.81rem;margin:.1rem .4rem .45rem;color:#4a5a5f}
.home-history-section{background:#fff9f0;padding:3.3rem 0}
.home-history-layout{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,2fr);gap:2rem;align-items:center}
.history-mini-timeline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;padding:2rem 0 0}
.history-mini-timeline:before{content:'';height:2px;background:#b6813e;position:absolute;top:54%;left:10%;right:10%}
.history-stop{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.history-stop .stop-art{display:grid;place-items:center;font-size:2.5rem;min-height:64px;filter:drop-shadow(0 3px 2px #0002)}
.history-stop .stop-dot{display:block;width:13px;height:13px;background:#bd7d37;border:3px solid #fff8eb;border-radius:50%;box-shadow:0 0 0 1px #bd7d37;position:relative;z-index:1}
.history-stop strong{font-family:Georgia,serif;line-height:1.25;font-size:.97rem}
.history-stop small{line-height:1.3;color:#54616a}
.home-heritage{background:linear-gradient(95deg,rgba(15,40,46,.96),rgba(41,43,35,.79)),url('/assets/images/puzzle-hero-showcase.webp') center/cover;position:relative;padding:3.2rem 0;color:#fff;border-block:3px solid #be8d54}
.home-heritage-inner{display:flex;align-items:center;justify-content:space-between;gap:3rem}
.home-heritage h2{font-size:clamp(2rem,3.2vw,3rem);margin:.15rem 0;color:#fff1da}
.home-heritage p{color:#f9e4c7;max-width:62ch}
.home-heritage .button{background:#f1bb70;color:#231f1b;border-color:#f1bb70;flex-shrink:0}
.home-heritage .button:hover{background:#fff0c9;border-color:#fff0c9}
.section-about-archive .prose{max-width:1100px}
.section-about-archive .prose{padding:2rem 2.2rem;background:#fffefa;border:1px solid #e8dac3;box-shadow:0 10px 25px #79512818;border-radius:20px}
/* Prefer legible layouts and fast visual feedback on small screens. */
@media(max-width:1200px){
 .header-inner{gap:.65rem}.site-nav a{font-size:.78rem;padding:.55rem .42rem}.brand-logo{max-width:205px}.brand-logo img{width:195px}.header-cta{padding:.65rem .9rem}
 .home-route-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
 .header-cta{display:none}
 .home-redesign .hero-grid{grid-template-columns:1.1fr .9fr}.home-redesign .hero-art{margin-right:-2rem}.home-redesign .hero h1{font-size:clamp(2.6rem,5vw,3.8rem)}
 .home-games-layout,.home-history-layout{grid-template-columns:1fr;gap:1.2rem}.home-games-intro{padding:0}.home-games-intro h2{margin:0}
 .section-featured .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .header-inner{min-height:74px}.brand-logo img{width:190px}
 .site-nav{top:74px;left:.75rem;right:.75rem;inset:74px .75rem auto;background:#103540;border:1px solid #486873;box-shadow:0 18px 35px #0006}
 .site-nav a{font-size:1rem;color:#faf3e8;padding:.85rem 1rem}
 .site-nav a:hover,.site-nav a[aria-current=page]{color:#ffca7f;background:#214d58;box-shadow:none;border-radius:.5rem}
 .nav-toggle{display:inline-flex}.header-cta{display:none}
 .home-redesign .hero{padding:3rem 0 1.9rem}
 .home-redesign .hero-grid{grid-template-columns:1fr}
 .home-redesign .hero-copy{padding:.6rem 0 0}
 .home-redesign .hero h1{font-size:clamp(2.35rem,9vw,4.1rem);max-width:15ch}
 .home-redesign .hero-art{margin:1.7rem -1rem 0;min-height:235px;max-height:310px;border-radius:16px;overflow:hidden}
 .home-redesign .hero-art::before{background:linear-gradient(0deg,#0d303b 0%,transparent 22%)}
 .home-redesign .hero .lead{max-width:60ch}
 .home-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .section-featured .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-hero{background-image:linear-gradient(90deg,#0d303be8,#0d303bf2 70%),url('/assets/images/puzzle-hero-showcase.webp');background-size:auto,cover}
}
@media(max-width:520px){
 .wrap{width:min(calc(100% - 1.4rem),var(--wrap))}
 .home-search{min-height:55px}
 .home-search button{min-width:95px}
 .home-search input{font-size:.88rem}
 .home-route-grid{gap:.6rem}.home-route{padding:1rem .65rem;min-height:245px}.home-route .route-image{height:92px}.home-route .route-image img{height:90px}
 .home-route h3{font-size:1.08rem}
 .home-game-grid{grid-template-columns:1fr}
 .home-game-card{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto;column-gap:.75rem;align-items:center;min-height:94px}
 .home-game-card .game-thumb{grid-row:span 2;min-height:78px}.home-game-card .game-visual{font-size:3rem}.home-game-card h3{margin:0}.home-game-card p{margin:0}
 .section-featured .card-grid{grid-template-columns:1fr 1fr;gap:.65rem}
 .section-featured .card-image{min-height:135px;padding:.5rem}.section-featured .card-image img{height:125px}
 .section-featured .card-body{padding:.7rem}.section-featured .card-body h3{font-size:1.03rem}
 .section-featured .badge-row{gap:.2rem}.section-featured .badge{font-size:.61rem;padding:.15rem .4rem}
 .section-featured .card-meta{font-size:.72rem}
 .history-mini-timeline{grid-template-columns:repeat(2,1fr);row-gap:1.5rem}.history-mini-timeline:before{display:none}
 .home-heritage-inner{display:block}.home-heritage .button{margin-top:.7rem}
 .section-about-archive .prose{padding:1.3rem}
 .footer-grid{grid-template-columns:1fr}
}
@media(max-width:380px){.home-route-grid{grid-template-columns:1fr 1fr}.home-route .route-image{height:78px}.home-route .route-image img{height:76px}}
@media(prefers-reduced-motion:reduce){.home-route,.home-game-card,.card,.category-card,.button,.header-cta{transition:none!important}}
@media print{.home-redesign .hero,.page-hero{background:#fff!important;color:#000!important}.home-redesign .hero-art{display:none!important}.home-redesign .hero h1,.page-hero h1{color:#000!important;text-shadow:none}.page-hero .lead,.home-redesign .hero .lead{color:#222}.home-heritage,.home-game-grid,.home-route-grid{display:none!important}}

/* Refinements after responsive review */
.page-hero .aliases,.page-hero .small-note{color:#efe2d0}
@media(max-width:1040px){
 .site-header .site-nav{background:#103540;border:1px solid #486873;border-radius:.8rem;box-shadow:0 16px 40px rgba(0,0,0,.45)}
 .site-header .site-nav a{color:#faf3e8;padding:.8rem .9rem;font-size:1rem}
 .site-header .site-nav a:hover,.site-header .site-nav a[aria-current=page]{background:#21515d;color:#ffcd92;box-shadow:none;border-radius:.45rem}
}
.home-game-card .game-visual{display:flex;align-items:center;justify-content:center;width:100%;height:100%;filter:none}
.home-game-card .game-visual img{display:block;width:100%;max-width:215px;height:120px;object-fit:contain;padding:.18rem}
@media(max-width:520px){.home-game-card .game-visual img{height:75px}}