/* Things to do: two screens on one page, "Welcome to Chennai" (Tamil phrases)
   and "All things Chennai" (recommendations). Warm paper, a terracotta kolam
   border down the left, watercolor Chennai around the edges. Built on pages.css. */
:root{
  --paper:#F5EADA;
  --t-ink:#1E2433;          /* navy-charcoal headings */
  --t-body:#2E2A24;
  --t-soft:#4C473F;
  --t-mute:#6E665A;
  --t-red:#9A2B12;          /* Tamil headline */
  --t-tamil:#A3200F;        /* Tamil phrases */
  --t-crumb:#9A6B33;
  --t-crumb-b:#7E4E1C;
  --card:rgb(250 242 228 / .86);
  --card-line:#E5D2B4;
  --mini:#F6E9D7;
  --mini-line:#EADBC3;
  --sage:#E5E0C8;
  --sage-line:#D3CBAA;
  --badge:#F3D2BC;
  --f-ta:"Noto Serif Tamil","Fraunces",Georgia,serif;
  --left:max(var(--pad),22px);
}
html,body{background:var(--paper)}
.ttd{color:var(--t-body)}
.ttd .bar{position:relative;z-index:3}

/* ---------- shared bits ---------- */
.ttd .eyebrow{color:var(--t-crumb);letter-spacing:.24em}
.ttd .eyebrow .sep{margin:0 .7em;opacity:.8}
.ttd .eyebrow b{font-weight:600;color:var(--t-crumb-b)}
.ttd h1{color:var(--t-ink);font-weight:400;letter-spacing:-.01em;margin-top:.7rem}
.ttd h1 em{font-style:italic;font-weight:400}
.ta{font-family:var(--f-ta);font-weight:600}
.ic{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tcard{position:relative;z-index:1;background:var(--card);border:1px solid var(--card-line);border-radius:10px;
  box-shadow:0 1px 0 rgb(255 255 255 / .7) inset,0 16px 30px -24px rgb(90 60 20 / .55)}

/* the terracotta kolam border, pinned to the left edge on wide screens */
.border{display:none}

/* ================= 1. Welcome to Chennai ================= */
.welcome{position:relative;padding:clamp(28px,4vw,44px) var(--pad) 0}
.welcome .head{position:relative;z-index:1}
.hello{font-size:clamp(2.3rem,7.4vw,4rem);line-height:1.12}
.hello .ta{color:var(--t-red);font-size:.94em;font-weight:700;letter-spacing:0}
.intro{margin:.9rem 0 0;max-width:66rem;font:400 clamp(1rem,1.5vw,1.16rem)/1.5 var(--f-display);color:var(--t-body)}
.intro em{display:block;font-style:italic}

/* the street painting: a banner on phones and tablets, a column on the right on wide screens */
.street{position:absolute;z-index:0;left:0;right:0;top:0;height:min(42svh,21rem);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}
.street img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}

.welcome-grid{display:grid;gap:14px;margin-top:clamp(22px,3vw,30px);position:relative;z-index:1}

/* Tamil in nine phrases */
.phrases{padding:18px 16px 18px}
.phrases h2,.cat h2{margin:0;font:400 clamp(1.35rem,2vw,1.55rem)/1.2 var(--f-display);color:var(--t-ink)}
.phrases .sub{margin:.35rem 0 0;font:400 .95rem/1.45 var(--f-display);color:var(--t-soft)}
.phrase-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.phrase-grid li{background:var(--mini);border:1px solid var(--mini-line);border-radius:6px;padding:12px 14px 11px;min-width:0;
  display:flex;flex-direction:column}
.phrase-grid li:last-child{grid-column:1 / -1}
.phrase-grid .en{font:400 .9rem/1.3 var(--f-display);color:var(--t-body)}
.phrase-grid .ta{margin-top:.4rem;font-size:1.12rem;line-height:1.35;color:var(--t-tamil);overflow-wrap:break-word}
.phrase-grid .say{margin-top:.25rem;font:400 .88rem/1.35 var(--f-ui);color:var(--t-mute)}

/* the saying, with the greeting drawing */
.saying{background:var(--sage);border-color:var(--sage-line);padding:20px 20px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.saying .q-ta{margin:0;font-size:1.06rem;line-height:1.45;color:#5A1A08}
.saying .q-en{margin:.2rem 0 0;font:italic 400 1.05rem/1.4 var(--f-display);color:#7A2A12}
.saying .q-mean{margin:.35rem 0 0;font:400 .82rem/1.4 var(--f-ui);color:var(--t-mute)}
.saying img{display:block;width:min(100%,236px);height:auto;margin:16px auto 0;mix-blend-mode:darken}
.orn{display:flex;align-items:center;gap:10px;width:min(100%,232px);margin:12px auto 0;color:#B07A3C}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55}
.orn svg{width:16px;height:16px;flex:none}
.saying .body{margin:12px 0 0;max-width:38ch;font:400 .98rem/1.55 var(--f-display);color:#2C2A1E;text-wrap:pretty}

/* the beach at the foot of the first screen */
.skyline{position:relative;z-index:0;margin-top:clamp(-40px,-3vw,-14px);line-height:0;pointer-events:none}
.skyline img{display:block;width:100%;height:clamp(120px,13.6vw,220px);object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}

/* ================= 2. All things Chennai ================= */
.all{position:relative;padding:clamp(40px,6vw,64px) var(--pad) clamp(28px,4vw,40px)}
.all .head{position:relative;z-index:1}
.all h1{font-size:clamp(2.5rem,7.4vw,4rem);line-height:1.05}
.all .lede2{margin:.8rem 0 0;font:400 clamp(1rem,1.5vw,1.18rem)/1.5 var(--f-display);color:var(--t-body);max-width:52ch}
.sketch,.beach-edge{display:none;position:absolute;pointer-events:none}

.cats{display:grid;gap:14px;margin-top:clamp(22px,3vw,30px);position:relative;z-index:1}
.cat{padding:16px 18px 10px}
.cat-h{display:flex;align-items:center;gap:14px;padding-bottom:12px}
.badge{flex:none;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--badge);display:grid;place-items:center;color:#2A221D;
  box-shadow:0 0 0 4px rgb(243 210 188 / .35)}
.badge .ic{width:1.65rem;height:1.65rem}
.cat-h p{margin:.15rem 0 0;font:400 .92rem/1.35 var(--f-ui);color:var(--t-soft)}
.items{list-style:none;margin:0;padding:0}
.items li{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;padding:10px 0;border-top:1px solid rgb(176 135 80 / .22)}
.items img{display:block;width:104px;height:64px;object-fit:cover;border-radius:4px;background:#E9DAC2;
  box-shadow:0 2px 6px -3px rgb(60 40 20 / .5)}
.items h3{margin:0;font:600 .98rem/1.3 var(--f-ui);color:#1C1A17}
.items p{margin:.2rem 0 0;font:400 .9rem/1.42 var(--f-ui);color:var(--t-soft)}

.dyk{position:relative;z-index:1;margin:clamp(22px,3vw,30px) auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 14px;text-align:center;font:400 .92rem/1.5 var(--f-ui);color:var(--t-soft)}
.dyk .lbl{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#8C4E38}
.dyk .lbl .ic{width:1.3rem;height:1.3rem;color:#B5652F}
.dyk .bar-sep{width:1px;height:1.3em;background:var(--t-mute);opacity:.5}
.dyk .flower{width:18px;height:18px;color:#B5652F;flex:none}


/* ---------- phones and tablets: the painting is a banner, the brand sits on a chip ---------- */
@media (max-width:1099px){
  .welcome{padding-top:calc(min(42svh,21rem) - 18px)}
  .ttd .bar{border-bottom-color:transparent;padding-right:0}
  .ttd .brand{display:inline-block;padding:.35rem .6rem;margin-left:-.6rem;border-radius:2px;background:rgb(245 234 218 / .82);color:var(--t-ink)}
  .ttd .bar{position:absolute;left:0;right:0;top:0}
  .welcome .eyebrow{text-shadow:0 0 12px var(--paper),0 0 4px var(--paper)}
}
@media (max-width:420px){
  .phrase-grid li{padding:12px 11px}
  .phrase-grid .ta{font-size:1.02rem}
  .items li{grid-template-columns:88px 1fr;gap:12px}
  .items img{width:88px;height:56px}
}

@media (min-width:560px){
  .phrase-grid{grid-template-columns:repeat(3,1fr)}
  .phrase-grid li:last-child{grid-column:auto}
}
@media (min-width:700px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .saying{display:grid;grid-template-columns:auto 1fr;column-gap:24px;text-align:left;align-items:center}
  .saying > *{grid-column:2}
  .saying img{grid-column:1;grid-row:1 / span 5;margin:0;width:200px}
  .saying .orn{margin-left:0}
  .sketch{display:block;right:0;top:4px;width:min(46vw,44rem);height:auto;opacity:.95;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%);mask-image:linear-gradient(to right,transparent 0,#000 18%)}
}
@media (min-width:700px) and (max-width:1099px){
  .all .head{padding-top:clamp(40px,8vw,90px)}
}

/* ---------- wide screens: the two screens of the mockup ---------- */
@media (min-width:1100px){
  :root{--left:max(8.4vw,128px)}
  .border{display:block;position:fixed;z-index:2;left:0;top:0;height:100vh;width:auto;max-width:none;pointer-events:none;
    -webkit-mask-image:linear-gradient(to right,#000 80%,transparent 100%);mask-image:linear-gradient(to right,#000 80%,transparent 100%)}
  .ttd .bar{margin-left:var(--left);margin-right:28.6vw;padding-top:24px;padding-bottom:18px}

  .welcome{padding:18px 0 0 var(--left);padding-right:27.6vw}
  .welcome .hello{margin-top:.5rem}
  .street{left:auto;right:0;top:-38px;bottom:auto;height:auto;width:28.2vw;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%),linear-gradient(to bottom,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 9%),linear-gradient(to bottom,#000 78%,transparent 100%);mask-composite:intersect}
  .street img{height:auto;object-fit:fill}
  .welcome-grid{grid-template-columns:1.84fr 1fr;align-items:start;gap:14px;margin-top:26px}
  .saying{display:flex;text-align:center}
  .saying img{width:min(100%,236px);margin:14px auto 0}
  .saying .orn{margin-left:auto}
  .hello{font-size:clamp(3rem,3.75vw,4rem)}

  .all{padding:clamp(48px,5vw,72px) 10.6vw 30px calc(var(--left) - 16px)}
  .all .head{padding-left:16px}
  .all h1{font-size:clamp(3rem,3.9vw,4.2rem)}
  .sketch{right:0;top:clamp(36px,3.4vw,56px);width:44vw}
  .beach-edge{display:block;right:0;top:clamp(200px,14vw,250px);bottom:0;width:10.4vw;height:calc(100% - clamp(200px,14vw,250px));object-fit:cover;object-position:0 0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
  .cats{grid-template-columns:repeat(3,1fr);gap:10px}
  .items li{grid-template-columns:104px 1fr}
}
@media (min-width:1100px) and (max-width:1399px){
  .phrase-grid .ta{font-size:1rem}
  .phrase-grid li{padding:11px 11px 10px}
}
@media (min-width:1500px){
  .phrase-grid .ta{font-size:1.2rem}
  .items h3{font-size:1.02rem}
}