/* A sunny, mid-century postcard palette. */
:root { --ink:#4d2857; --muted:#825f76; --cream:#fff8d9; --rose:#f88fa2; --pink:#ffc6d2; --sun:#ffbd35; --mint:#aee6d1; --aqua:#a5dded; --red:#df5e6c; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(#f3d7a7 1px,transparent 1px) 0 0/12px 12px,var(--cream); color:var(--ink); font-family:Nunito,Arial,sans-serif; } .wrap { width:min(1060px, calc(100% - 48px)); margin:0 auto; }
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; color:var(--ink); } .brand { color:inherit; text-decoration:none; display:inline-flex; align-items:center; flex:none; } .brand img { display:block; width:min(220px,48vw); height:min(65px,14.22vw); object-fit:cover; object-position:center; } .footer .brand img { width:min(190px,44vw); height:min(56px,13.04vw); } .nav-note { padding:7px 12px; border:2px solid var(--ink); border-radius:99px; font:800 10px "DM Mono",monospace; letter-spacing:.08em; background:var(--mint); transform:rotate(2deg); }
.hero { min-height:650px; position:relative; overflow:hidden; background:linear-gradient(180deg,#a5dded 0 49%,#ffc6d2 49% 100%); color:var(--ink); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); } .hero::before { content:""; position:absolute; inset:0; opacity:.32; background:radial-gradient(#fff 1px,transparent 1px) 0 0/14px 14px; } .hero::after { content:""; position:absolute; z-index:0; width:750px; height:750px; border-radius:50%; background:var(--sun); border:4px solid var(--ink); right:-225px; bottom:-485px; box-shadow:inset 0 0 0 17px #ffd66e; }
.hero-content { position:relative; z-index:1; display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:24px; padding:36px 0 120px; }.eyebrow,.hero-title-row { grid-column:1 / -1; }.eyebrow { margin:0 0 13px; color:var(--red); font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; font-weight:500; }.hero .eyebrow { color:var(--ink); font-size:14px; }.hero-title-row { display:flex; align-items:center; gap:16px; }.hero-clock { width:175px; height:188px; flex:0 0 175px; }.hero-clock img { display:block; width:100%; height:auto; } h1,h2 { margin:0; font-family:Lobster,cursive; font-weight:400; letter-spacing:.005em; line-height:1; } h1 { font-size:clamp(59px,7vw,94px); text-shadow:3px 3px 0 #fff8d9; } h1 em,h2 em { font-style:normal; color:var(--red); }.hero-copy,.search-card { margin-top:58px; }.hero-copy { grid-column:1; align-self:center; max-width:220px; font-size:16px; font-weight:700; line-height:1.6; color:#63375d; margin-bottom:0; position:relative; z-index:2; transform:none; }
.search-card { grid-column:2; max-width:none; padding:8px; border:3px solid var(--ink); border-radius:18px; background:#fffdf3; box-shadow:7px 7px 0 var(--ink); display:grid; grid-template-columns:minmax(250px,1fr) 160px 172px; gap:3px; color:var(--ink); }.location-field { min-width:0; position:relative; display:flex; align-items:center; }.pin { font-size:24px; color:var(--red); margin-left:15px; }.location-field input { width:100%; padding:18px 13px; border:0; outline:0; background:transparent; font:700 14px Nunito,sans-serif; color:var(--ink); }.date-field { border-left:2px dashed #e8a7b4; padding:7px 0 6px 18px; display:flex; flex-direction:column; }.date-field label { color:var(--muted); font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.date-field input { margin-top:3px; border:0; color:var(--ink); outline:0; font:800 13px Nunito,sans-serif; background:transparent; }.primary-button { border:2px solid var(--ink); border-radius:10px; background:var(--red); color:#fffbed; font:800 14px Nunito,sans-serif; cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .15s,box-shadow .15s; }.primary-button:hover { transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }.primary-button span { padding-left:12px; font-size:18px; }.use-location { grid-column:1 / -1; justify-self:center; margin:60px 0 0; border:2px solid var(--ink); border-radius:99px; padding:8px 13px; background:var(--mint); color:var(--ink); font:800 11px Nunito,sans-serif; cursor:pointer; box-shadow:2px 2px 0 var(--ink); }.use-location span { color:var(--red); font-size:15px; padding-right:5px; }.form-status { grid-column:1 / -1; min-height:18px; margin:12px 0 0; font-size:12px; font-weight:700; color:var(--ink); }.suggestions { position:absolute; top:100%; left:0; right:0; background:#fffdf3; z-index:5; border:2px solid var(--ink); border-radius:0 0 10px 10px; box-shadow:4px 4px 0 var(--ink); overflow:hidden; }.suggestion { width:100%; border:0; display:block; text-align:left; padding:12px 18px; background:#fffdf3; color:var(--ink); font:700 13px Nunito,sans-serif; cursor:pointer; }.suggestion:hover,.suggestion:focus { background:var(--pink); outline:0; }.suggestion small { display:block; color:var(--muted); margin-top:2px; }
.ad-slot { border:2px dashed #ca8ca3; border-radius:12px; background:rgba(255,253,243,.58); color:var(--muted); text-align:center; }.ad-slot > span { display:block; margin:-8px auto 0; width:max-content; padding:0 7px; background:var(--cream); font:500 9px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.ad-placeholder { padding:22px 14px 19px; font-size:12px; font-weight:700; }.ad-slot-top { margin-top:27px; margin-bottom:0; }.ad-slot-result { margin-top:30px; }.ad-slot-result .ad-placeholder { padding:18px 14px 16px; }
.results { margin-top:31px; position:relative; z-index:3; padding-bottom:82px; }.result-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:20px; }.result-heading h2,.how h2 { font-size:clamp(42px,4.5vw,60px); }.date-copy { margin:10px 0 0; color:var(--muted); font-size:13px; font-weight:700; }.change-button { border:2px solid var(--ink); padding:9px 14px; border-radius:99px; background:var(--mint); color:var(--ink); box-shadow:2px 2px 0 var(--ink); font:800 11px Nunito,sans-serif; cursor:pointer; }.sun-grid { display:grid; grid-template-columns:1fr 1fr .8fr; gap:15px; }.sun-card,.daylight-card { min-height:216px; padding:27px; border:3px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink); display:flex; flex-direction:column; }.sunrise-card { background:#ffd66e; }.sunset-card { background:var(--aqua); }.daylight-card { background:var(--rose); color:var(--ink); justify-content:center; }.sun-icon { margin-bottom:24px; font-size:38px; line-height:.7; color:var(--red); }.sun-card p,.daylight-card p { margin:0; font:500 11px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; opacity:.8; }.sun-card strong,.daylight-card strong { margin-top:10px; font-family:Lobster,cursive; font-size:43px; letter-spacing:.01em; font-weight:400; }.sun-card .time-zone,.daylight-card span:not(.sun-icon) { margin-top:auto; font-size:11px; font-weight:700; color:var(--muted); }.daylight-card span { color:#6b3e5c!important; }.source-note { max-width:650px; margin:23px 0 0; font-size:11px; font-weight:700; color:var(--muted); line-height:1.6; }
.how { padding:78px 0 100px; border-top:3px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:10%; }.how-copy { padding-top:28px; }.how-copy p { max-width:445px; color:#68465f; line-height:1.8; font-size:15px; font-weight:700; }.region-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }.region-tags span { border:2px solid var(--ink); padding:7px 10px; border-radius:99px; font-size:11px; font-weight:800; color:var(--ink); background:#fffdf3; box-shadow:2px 2px 0 var(--ink); }.region-tags span:nth-child(2n) { background:var(--mint); }.footer { border-top:3px solid var(--ink); padding:26px 0 33px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; color:var(--ink); }.footer-branding { display:flex; align-items:center; gap:16px; }.footer p { color:var(--muted); font-weight:800; font-size:11px; }.footer-link { color:var(--ink); font-size:12px; font-weight:900; text-decoration:underline; text-underline-offset:3px; }.footer-legal,.footer-links { display:flex; flex-wrap:wrap; gap:16px; }.footer-legal { justify-content:center; }.footer-links { justify-content:flex-end; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:700px) { .wrap { width:min(100% - 32px,1120px); }.nav { height:70px; }.nav-note { display:none; }.hero { min-height:660px; }.hero-content { grid-template-columns:1fr; padding:58px 0 104px; }.hero-title-row { gap:8px; }.hero-clock { width:104px; height:111px; flex-basis:104px; }.hero-clock img { width:100%; }.hero-copy,.search-card { grid-column:auto; margin-top:0; }.hero-copy { max-width:470px; margin-bottom:20px; }.use-location,.form-status { grid-column:auto; } .search-card { display:block; padding:7px; }.date-field { border-left:0; border-top:2px dashed #e8a7b4; padding:11px 13px; margin:0 7px; }.primary-button { width:100%; padding:16px; margin-top:7px; }.ad-slot-top { margin-top:20px; }.results { margin-top:28px; }.result-heading { align-items:flex-start; gap:15px; }.change-button { flex:0 0 auto; }.sun-grid { grid-template-columns:1fr 1fr; }.daylight-card { grid-column:span 2; min-height:160px; }.sun-card,.daylight-card { padding:21px; }.sun-card strong,.daylight-card strong { font-size:35px; }.how { grid-template-columns:1fr; gap:0; padding:66px 0; }.how-copy { padding-top:10px; }.footer { padding:22px 0; grid-template-columns:1fr; justify-items:center; text-align:center; }.footer-branding { flex-direction:column; gap:4px; }.footer-legal,.footer-links { justify-content:center; } }
@media (max-width:390px) { h1 { font-size:52px; }.sun-grid { grid-template-columns:1fr; }.daylight-card { grid-column:auto; }.result-heading { display:block; }.change-button { margin-top:15px; } }
.hero-sun-message { position:absolute; z-index:1; width:750px; height:750px; right:-200px; bottom:-485px; pointer-events:none; }.hero-sun-message span { position:absolute; top:50%; left:50%; color:var(--ink); font:400 24px Lobster,cursive; line-height:1; text-shadow:1px 1px 0 #ffd66e; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-333px); }.hero-sun-message .sun-arrow { color:var(--red); font-size:28px; }
.hero-content { display:block; z-index:2; padding:24px 0 64px; }.eyebrow,.hero-title-row,.hero-copy,.search-card,.use-location,.form-status { grid-column:auto; }.hero-copy { max-width:none; margin:75px 0 24px; text-align:left; white-space:nowrap; transform:none; }.search-card { max-width:860px; margin:0; }.use-location { display:block; justify-self:start; margin:16px 0 0; }.form-status { margin:10px auto 0; text-align:center; }
@media (max-width:700px) { .hero-content { padding:42px 0 72px; }.hero-copy { max-width:470px; margin:21px 0 20px; text-align:left; white-space:normal; }.search-card { margin:0; }.use-location { margin:18px 0 0; } }
.legal-page { max-width:850px; padding:50px 0 90px; }.legal-page h1 { margin-bottom:22px; font-size:clamp(54px,7vw,84px); }.legal-page h2 { margin:42px 0 12px; font-size:clamp(32px,4vw,46px); }.legal-page p { max-width:760px; color:#63375d; font-size:15px; font-weight:700; line-height:1.8; }.legal-page a { color:var(--red); text-underline-offset:3px; }.legal-page .legal-lede { max-width:630px; font-size:19px; line-height:1.6; }.legal-page .legal-note { margin-top:44px; padding:16px 18px; border:2px dashed #ca8ca3; border-radius:12px; background:#fffdf3; font-size:13px; }
@media (max-width:700px) { .legal-page { padding:34px 0 64px; }.legal-page h2 { margin-top:34px; }.legal-page p { font-size:14px; } }

/* Balanced hero proportions: full-bleed color panels with a more compact content measure. */
.hero { min-height:575px; }
.hero::after { width:560px; height:560px; right:-150px; bottom:-350px; box-shadow:inset 0 0 0 13px #ffd66e; }
.hero-sun-message { width:560px; height:560px; right:-145px; bottom:-350px; }
.hero-sun-message span { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-245px); font-size:21px; }
.hero-sun-message .sun-arrow { font-size:24px; }
.hero-content { padding:24px 0 36px; }
.hero-copy { margin:58px 0 20px; }
.search-card { max-width:820px; }
.use-location { margin:14px 0 0; }
.form-status { margin:8px auto 0; }

@media (max-width:980px) {
  .hero { min-height:560px; }
  .hero::after { width:500px; height:500px; right:-140px; bottom:-315px; }
  .hero-sun-message { width:500px; height:500px; right:-135px; bottom:-315px; }
  .hero-sun-message span { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-218px); font-size:19px; }
  .hero-sun-message .sun-arrow { font-size:22px; }
  .hero-copy { max-width:680px; margin:44px 0 20px; white-space:normal; }
  .search-card { max-width:720px; }
}

@media (max-width:700px) {
  .wrap { width:min(100% - 32px,1060px); }
  .hero { min-height:560px; }
  .hero::after { width:350px; height:350px; right:-105px; bottom:-220px; box-shadow:inset 0 0 0 10px #ffd66e; }
  .hero-sun-message { display:none; }
  .hero-content { padding:30px 0 32px; }
  .hero-copy { margin:18px 0; }
  .search-card { max-width:none; }
  .use-location { margin:16px 0 0; }
}