@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Playfair+Display:ital,wght@1,600&display=swap');

        :root{
          --bg:#0b0b0b;
          --panel:#101010;
          --text:#f0f0f0;
          --muted:#bdbdbd;
          --accent:#ff6a00; /* 你可改為更飽和或偏黃橘 */
          --line:rgba(255,255,255,.06); /* 垂直導線 */
          --maxw:1180px;
          --gutter:48px;
          --header-height: 64px; /* 改一次全站套用 */
        }

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 119px,
      var(--line) 120px
    ),
    var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.6;
}

/* NAV */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(6px);
  background:linear-gradient(to bottom, rgba(11,11,11,.9), rgba(11,11,11,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:"Bebas Neue", Oswald, Impact, sans-serif;
  letter-spacing:.5px; font-size:24px; color:var(--text); text-decoration:none;
}
.brand img{
    max-width:180px ;
    margin-right:100px;
}
.menu{display:flex; gap:26px}
.menu a{
  color:var(--text); text-decoration:none; opacity:.9; font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}
.menu a:hover{opacity:1}

/* HERO（選用） */ 
.hero{
  max-width:var(--maxw); margin:64px auto 24px; padding:0 var(--gutter); margin-top: var(--header-height);
}
.kicker{
  display:inline-block; padding:6px 10px; background:var(--accent); color:#111;
  font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.hero h1{
  margin:16px 0 0; font-family:"Bebas Neue", Oswald, Impact, sans-serif;
  font-size:64px; line-height:1; letter-spacing:.5px;
}

/* PROJECT GRID */
.section{max-width:var(--maxw); margin:32px auto 96px; padding:0 var(--gutter)}
.projects{display:flex; flex-direction:column; gap:96px}

.project{
  display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap:64px;
}
.project--right{grid-template-columns: 0.9fr 1.1fr}
.project--right .media{order:2}
.project--right .content{order:1}

/* 影像拼貼 */
.media{
  position:relative; aspect-ratio:16/11; background:var(--panel); overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.media img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.1);
  transform:scale(1.03);
}
.media::after{
  content:""; position:absolute; inset:auto auto 10% -6%;
  width:42%; height:38%; background:var(--accent); mix-blend-mode:normal;
  box-shadow:0 12px 28px rgba(255,106,0,.22);
}
/* 小貼圖 */
.thumb{
  position:absolute; right:-6%; bottom:-8%; width:32%; aspect-ratio:1/1.2; overflow:hidden; border:6px solid var(--bg); background:#222;
  box-shadow:0 10px 24px rgba(0,0,0,.5);
}
.thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.1)}

/* 文字區 */
.content h3{
  margin:0 0 8px;
  font-family:"Bebas Neue", Oswald, Impact, sans-serif;
  font-size:36px; line-height:1.05; letter-spacing:.6px; text-transform:uppercase;
}
.content p{color:var(--muted); margin:0 0 18px; max-width:56ch}
.btn{
  display:inline-block; padding:12px 18px; border:1.5px solid var(--text); color:var(--text);
  text-decoration:none; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.btn:hover{background:var(--text); color:#111}

/* FOOTER */
.footer{border-top:1px solid rgba(255,255,255,.08); padding:48px 0 80px; color:var(--muted)}
.footer .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:flex; justify-content:space-between; align-items:center}
.footer .mark{font-family:"Bebas Neue", Oswald, Impact, sans-serif; font-size:28px}

/* RWD */
@media (max-width: 980px){
  .projects{gap:72px}
  .project, .project--right{grid-template-columns:1fr; gap:28px}
  .media{aspect-ratio:16/10}
  .media::after{left:auto; right:-4%; bottom:8%; width:46%; height:32%}
  .thumb{display:none}
  .hero h1{font-size:44px}
}


/* ==== Legacy Flow Patch (drop this at the END of styles.css) ==== */

/* 1) Avoid sticky header overlap */
:root { --header-height: 64px; }
body { padding-top: var(--header-height); }

/* 2) Make the main container consistent */
.section { max-width: var(--maxw); margin: 32px auto 96px; padding: 0 var(--gutter); }

/* 3) A neutral flow style for pages that output raw images/text without custom classes */
.legacy-flow > * + * { margin-top: 16px; }
.legacy-flow h2,
.legacy-flow h3,
.legacy-flow h4 {
  font-family: "Bebas Neue", Oswald, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 24px 0 8px;
}
.legacy-flow p,
.legacy-flow li,
.section p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
}

/* 4) Media defaults */
.legacy-flow img,
.section img,
.legacy-flow video,
.section video,
.legacy-flow iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* 5) Space between big blocks */
.legacy-flow .block,
.section .block {
  margin: 32px 0 56px;
}

/* 6) Small labels like 'Breakdown' or captions */
.caption, .label, .kicker-small {
  display: inline-block;
  padding: 4px 8px;
  background: var(--accent);
  color: #111;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 8px 0 12px;
}

/* 7) Two-column text beside an image, when markup is simple (image followed by a div/paragraph) */
.stackish {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px){
  .stackish { grid-template-columns: 1fr; gap: 16px; }
}

/* 8) Tighter hero spacing if headings wrap */
.hero { margin-bottom: 12px; }