:root { --ink: #0b1f3a; --paper: #f4f8ff; --acid: #41d9ff; --orange: #5d7cff; --muted: #566b85; --line: #d4dfed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { height: 86px; padding: 0 clamp(1.5rem, 5.5vw, 5.5rem); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; width: fit-content; font-size: 15px; font-weight: 700; line-height: .88; letter-spacing: -.8px; text-transform: lowercase; }
.brand-mark {
    width: auto;
    height: 32px;
    display: block;
    border-radius: 0;
    background: none;
}
nav { display: flex; gap: 33px; font-size: 13px; font-weight: 600; }
nav a { padding: 7px 0; border-bottom: 1px solid transparent; } nav a:hover { border-color: var(--ink); }
.menu-toggle { display: none; }
.hero { min-height: 620px; display: grid; grid-template-columns: 49% 51%; padding-left: clamp(1.5rem, 5.5vw, 5.5rem); }
.hero-copy { padding: clamp(4.5rem, 9vw, 8rem) 3rem 3rem 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.eyebrow { margin: 0 0 17px; font: 500 10px "DM Mono", monospace; letter-spacing: .1em; }
h1, h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; letter-spacing: -.065em; line-height: .94; }
h1 { font-size: clamp(3.9rem, 7.2vw, 7rem); } h1 em, h2 em { font-style: italic; color: #2676c9; }
.hero-intro { max-width: 390px; margin: 28px 0 30px; color: #435a77; font-size: 17px; line-height: 1.55; }
.button { display: inline-flex; align-items: center; gap: 31px; padding: 15px 17px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; } .button span { font-size: 18px; }
.hero-visual { position: relative; overflow: hidden; min-height: 620px; background: #8fb5ea url("assets/modern-smart-home.png") center / cover no-repeat; }
.sun { position: absolute; top: 12%; right: 10%; width: min(34vw, 440px); aspect-ratio: 1; border-radius: 50%; background: #d9f6ff; }
.window { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border: 13px solid #dceaff; opacity: .76; } .window i { border: 4px solid #dceaff; }
.lamp { position: absolute; left: 22%; bottom: 12%; width: 180px; height: 270px; z-index: 2; } .lamp span { position: absolute; left: 24px; top: 0; width: 132px; height: 100px; border-radius: 70px 70px 18px 18px; background: #5d7cff; } .lamp i { position: absolute; left: 84px; top: 98px; width: 13px; height: 160px; background: #173a65; } .lamp i::after { content: ""; position: absolute; bottom: 0; left: -39px; width: 91px; height: 12px; border-radius: 50%; background: #173a65; }
.plant { position: absolute; right: 3%; bottom: -10px; width: 180px; height: 250px; z-index: 2; } .plant::after { content: ""; position: absolute; bottom: 0; left: 63px; width: 72px; height: 70px; border-radius: 45% 45% 8px 8px; background: #9fc7ed; } .plant i { position: absolute; bottom: 55px; left: 94px; width: 42px; height: 147px; border-radius: 100% 0 100% 0; background: #176eaa; transform-origin: bottom left; } .plant i:nth-child(2) { transform: rotate(43deg) scale(.82); } .plant i:nth-child(3) { transform: rotate(84deg) scale(.72); } .plant i:nth-child(4) { transform: rotate(-42deg) scale(.83); } .plant i:nth-child(5) { transform: rotate(-82deg) scale(.7); }
.hero-visual p { position: absolute; top: 32px; left: 32px; z-index: 3; margin: 0; font: 500 11px/1.04 "DM Mono", monospace; letter-spacing: .05em; }
.intro-band { min-height: 56px; display: flex; align-items: center; justify-content: space-around; gap: 30px; overflow: hidden; background: var(--acid); white-space: nowrap; font: 500 11px "DM Mono", monospace; letter-spacing: .07em; } .intro-band span { font-size: 18px; }
.section { padding: 118px clamp(1.5rem, 5.5vw, 5.5rem); } .section-heading { max-width: 620px; } h2 { font-size: clamp(3rem, 5vw, 4.8rem); }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 55px; }.topic-card { position: relative; min-height: 273px; padding: 20px; display: flex; flex-direction: column; overflow: hidden; }.topic-card--light { background: #dcecff; }.topic-card--climate { background: #cceaf4; }.topic-card--security { background: #d9dcff; }.topic-card--routines { background: #b9e5e0; }.topic-number { font: 10px "DM Mono", monospace; }.topic-card h3 { margin: auto 0 10px; font: 500 29px/.97 Fraunces, serif; letter-spacing: -.05em; }.topic-card p { max-width: 200px; margin: 0; font-size: 13px; line-height: 1.45; }.topic-icon { position: absolute; top: -29px; right: -3px; font: 108px/.9 Fraunces, serif; opacity: .22; }
.approach { display: grid; grid-template-columns: 48% 52%; background: var(--ink); color: #f3f8ff; }.approach-art { position: relative; min-height: 600px; overflow: hidden; background: #1c5d99; }.home-shape { position: absolute; width: 340px; height: 285px; bottom: 0; left: 50%; background: #82c4ff; transform: translateX(-50%); }.home-shape::before { content: ""; position: absolute; width: 250px; height: 250px; top: -125px; left: 45px; background: #82c4ff; transform: rotate(45deg); }.home-shape i { position: absolute; z-index: 2; background: #123e70; }.home-shape i:nth-child(1) { left: 44px; bottom: 0; width: 100px; height: 150px; }.home-shape i:nth-child(2) { right: 45px; bottom: 40px; width: 72px; height: 72px; }.home-shape i:nth-child(3) { right: 45px; bottom: 142px; width: 72px; height: 72px; }.home-shape i:nth-child(4) { right: 136px; bottom: 142px; width: 72px; height: 72px; }.approach-art > span { position: absolute; top: 34px; left: 34px; font: 500 11px/.98 "DM Mono", monospace; letter-spacing: .08em; }.approach-copy { padding: 104px clamp(1.5rem, 7vw, 8rem); }.approach-copy h2 em { color: var(--acid); }.approach-copy > p:not(.eyebrow) { max-width: 445px; margin: 31px 0; color: #bfdbf4; font-size: 16px; line-height: 1.6; }.approach-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #476c94; }.approach-copy li { padding: 15px 0; border-bottom: 1px solid #476c94; font-size: 14px; }.approach-copy li span { display: inline-block; width: 48px; color: var(--acid); font: 10px "DM Mono", monospace; }
.guides { background: #e8f1fc; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 55px; }
.guide-card { min-height: 305px; padding: 28px; display: flex; flex-direction: column; background: #fbfdff; border: 1px solid var(--line); }
.guide-card:nth-child(2) { background: #d8e8fa; }
.guide-type { margin: 0; font: 500 10px "DM Mono", monospace; letter-spacing: .1em; }
.guide-card h3 { max-width: 430px; margin: 54px 0 13px; font: 500 clamp(1.85rem, 3vw, 2.7rem)/.98 Fraunces, serif; letter-spacing: -.05em; }
.guide-card > p:not(.guide-type) { max-width: 510px; margin: 0; color: #435a77; font-size: 14px; line-height: 1.55; }
.guide-card a { width: fit-content; margin-top: auto; padding-top: 26px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--ink); }
.guide-card a span { margin-left: 22px; font-size: 17px; }
footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 40px clamp(1.5rem, 5.5vw, 5.5rem) 19px; background: var(--ink); color: #f3f8ff; } footer > p { margin: 0; color: #a8c3df; font-size: 13px; text-align: right; } footer small { grid-column: 1 / -1; margin-top: 30px; color: #7fa0c4; font: 9px "DM Mono", monospace; }
.article-page { padding-bottom: 110px; }
.article-hero { max-width: 980px; padding: 74px clamp(1.5rem, 12vw, 12rem) 66px; }
.back-link { display: inline-block; margin-bottom: 68px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font: 500 11px "DM Mono", monospace; letter-spacing: .04em; }
.article-hero h1 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); }
.article-dek { max-width: 620px; margin: 29px 0 0; color: #4e5d53; font-size: 18px; line-height: 1.55; }
.article-feature { min-height: 430px; margin: 0 clamp(1.5rem, 5.5vw, 5.5rem); padding: 31px; display: flex; align-items: flex-start; background: linear-gradient(125deg, rgba(25,42,34,.1), rgba(25,42,34,.6)), url("assets/modern-smart-home.png") center / cover; color: #fff; }
.article-feature span { font: 500 11px/1.1 "DM Mono", monospace; letter-spacing: .08em; }
.article-layout { display: grid; grid-template-columns: 190px minmax(0, 650px); gap: clamp(2rem, 7vw, 8rem); max-width: 1100px; margin: 75px auto 0; padding: 0 1.5rem; }
.article-aside { align-self: start; position: sticky; top: 30px; display: flex; flex-direction: column; gap: 13px; font-size: 12px; line-height: 1.3; }
.article-aside p { margin: 0 0 4px; color: #607064; font: 500 10px "DM Mono", monospace; letter-spacing: .1em; }
.article-aside a { width: fit-content; border-bottom: 1px solid transparent; }.article-aside a:hover { border-color: var(--ink); }
.article-content { font-size: 17px; line-height: 1.7; }.article-content p { margin: 0 0 25px; }.article-lead { color: var(--ink); font: 500 25px/1.4 Fraunces, serif; letter-spacing: -.025em; }.article-content h2 { margin: 65px 0 20px; font-size: clamp(2.35rem, 4vw, 3.6rem); line-height: .98; }.article-content h3 { margin: 11px 0 7px; font: 500 23px/.98 Fraunces, serif; letter-spacing: -.04em; }.article-content ul { margin: 0 0 28px; padding: 0; list-style: none; }.article-content li { margin-bottom: 8px; padding-left: 21px; position: relative; }.article-content li::before { content: "✦"; position: absolute; left: 0; color: #6f9047; font-size: 11px; }.article-content blockquote { margin: 47px 0; padding: 27px 30px; background: var(--acid); font: 500 28px/1.2 Fraunces, serif; letter-spacing: -.035em; }.idea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 33px 0 49px; }.idea-grid section { padding: 17px; background: #d8e5d1; }.idea-grid section:nth-child(2) { background: #e8dfc8; }.idea-grid section:nth-child(3) { background: #d9d0ea; }.idea-grid span { font: 10px "DM Mono", monospace; }.idea-grid p { margin: 0; font-size: 13px; line-height: 1.45; }
.article-dek { color: #435a77; }
.article-matter-img { margin: 24px 0 32px; }
.article-matter-img img { width: 100%; border-radius: 3px; display: block; }
.article-feature { background-image: linear-gradient(125deg, rgba(11,31,58,.12), rgba(11,31,58,.72)), url("assets/modern-smart-home.png"); }
.article-aside p { color: #607797; }
.article-content li::before { color: #2676c9; }
.idea-grid section { background: #d8e8fa; }.idea-grid section:nth-child(2) { background: #dcecff; }.idea-grid section:nth-child(3) { background: #d9dcff; }
.article-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 44px 0 50px; }
.article-showcase-fig { margin: 0; position: relative; overflow: hidden; border-radius: 3px; }
.article-showcase-fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s ease; }
.article-showcase-fig:hover img { transform: scale(1.04); }
.article-showcase-fig figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 9px 14px; background: linear-gradient(to top, rgba(11,31,58,.75), transparent); color: #fff; font: 500 11px "DM Mono", monospace; letter-spacing: .05em; }

/* In-paragraph content links — the rest of the file already uses a
   border-bottom to signal "clickable" (.back-link, .guide-card a,
   .article-aside a:hover), so this extends that same convention to
   links inside article body text, which previously had no affordance
   at all. Uses the existing #2676c9 accent (already used for h1/h2 em
   and list bullets) rather than introducing a new color. */
.article-content a {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.article-content a:hover {
  border-color: #2676c9;
  color: #2676c9;
}

@media (max-width: 850px) { .site-header { height: 68px; }.menu-toggle { display: grid; gap: 5px; padding: 10px; border: 0; background: transparent; }.menu-toggle span { display: block; width: 21px; height: 1px; background: var(--ink); } nav { position: absolute; top: 68px; left: 0; right: 0; z-index: 10; display: none; padding: 12px 5vw 19px; flex-direction: column; gap: 4px; background: var(--paper); border-bottom: 1px solid var(--line); } nav.open { display: flex; } nav a { padding: 9px 0; }.hero { min-height: 0; grid-template-columns: 1fr; padding: 0; }.hero-copy { min-height: 510px; padding: 78px 7vw 50px; }.hero-visual { min-height: 410px; }.sun { width: 310px; }.lamp { left: 19%; transform: scale(.8); transform-origin: bottom left; }.plant { transform: scale(.78); transform-origin: bottom right; }.intro-band { justify-content: flex-start; padding-left: 20px; }.intro-band p:nth-of-type(2) { display: none; }.section { padding: 76px 7vw; }.topic-grid { grid-template-columns: 1fr 1fr; margin-top: 38px; }.topic-card { min-height: 240px; }.approach { grid-template-columns: 1fr; }.approach-art { min-height: 400px; }.approach-copy { padding: 75px 7vw; }.guide-grid { grid-template-columns: 1fr; margin-top: 38px; }.guide-card { min-height: 280px; } footer { padding: 35px 7vw 18px; } }
@media (max-width: 850px) { .article-hero { padding: 55px 7vw 46px; }.article-feature { min-height: 320px; margin: 0; }.article-layout { grid-template-columns: 1fr; gap: 35px; margin-top: 52px; padding: 0 7vw; }.article-aside { position: static; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.idea-grid { grid-template-columns: 1fr; }.article-showcase { grid-template-columns: 1fr; }.article-showcase-fig img { aspect-ratio: 4 / 3; } }
@media (max-width: 480px) { h1 { font-size: 3.7rem; }.hero-copy { min-height: 480px; }.topic-grid { grid-template-columns: 1fr; }.topic-card { min-height: 210px; }.hero-visual { min-height: 330px; }.window { border-width: 8px; }.window i { border-width: 3px; }.approach-art { min-height: 340px; }.home-shape { transform: translateX(-50%) scale(.78); transform-origin: bottom center; } footer { grid-template-columns: 1fr; } footer > p { text-align: left; }.article-hero h1 { font-size: 3.45rem; }.article-dek { font-size: 16px; }.back-link { margin-bottom: 48px; }.article-content { font-size: 16px; }.article-lead { font-size: 22px; }.article-content blockquote { padding: 23px; font-size: 24px; } }